<template>
  <div class="MOptionCustom">
    <div class="MOptionCustomMain">
      <div class="CRTop">
        <div>
          <span>企业设置 / 保养单增项</span>
        </div>
        <div style="text-align:right">
          <el-button type="primary" v-if="MOptionCustomBtn.MOptionCustomBtn31" round @click="AddMOptioninit">添加保养项</el-button>
        </div>
      </div>
      <el-row>
        <el-tabs class="BCtabs" v-model="activeName" type="border-card" @tab-click="ClickTab">
          <el-tab-pane  label="乘客梯/载货电梯" name="first"></el-tab-pane>
          <el-tab-pane label="液压梯" name="second"></el-tab-pane>
          <el-tab-pane label="扶梯/人行道" name="third"></el-tab-pane>
          <el-tab-pane label="杂物梯" name="fourth"></el-tab-pane>
          <!-- <div class="TabType">
            <div class="TypeOption">
              <div>
              <span :style="{ 'color': tableTabType ==1?'#1989FA': '#333' }" @click="ClickType(1)">半月保养</span>
              <span>/</span>
            </div>
            <div>
              <span :style="{ 'color': tableTabType ==2?'#1989FA': '#333' }" @click="ClickType(2)">季度保养</span>
              <span>/</span>
            </div>
            <div>
              <span :style="{ 'color': tableTabType ==3?'#1989FA': '#333' }" @click="ClickType(3)">半年保养</span>
              <span>/</span>
            </div>
            <div>
              <span :style="{ 'color': tableTabType ==4?'#1989FA': '#333' }" @click="ClickType(4)">全年保养</span>
            </div>
            </div>
            <div class="addOption">
              <el-button type="primary" @click="MOptioninitUpdate">添加保养项</el-button>
            </div>
          </div> -->
        </el-tabs>
        <p class="SearchTitle">
          总记录条数
          <span style="color:#379FFF">{{TitleTotal}}</span>条
        </p>
        <el-tabs v-model="activeName1" @tab-click="handleClick">
          <el-tab-pane label="半月保养" name="first"></el-tab-pane>
          <el-tab-pane label="季度保养" name="second"></el-tab-pane>
          <el-tab-pane label="半年保养" name="third"></el-tab-pane>
          <el-tab-pane label="全年保养" name="fourth"></el-tab-pane>
          <el-table
            :data="UserDataMOptionCustom"
            style="width: 100%"
            :header-cell-style="{'background-color':'rgba(250,250,250,1)'}"
            border
            v-loading="UserDataMOptionCustomLoad"
          >
            <el-table-column prop="id" label="序号" width="100px;"></el-table-column>
            <el-table-column prop="item" label="维保项目（内容）" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="content" label="维保基本要求" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="状态" width="50px;">
              <template slot-scope="props">
                <i :class="[props.row.status===1?'el-icon-circle-check':(props.row.status===2?'el-icon-circle-close':'iconfont iconjinzhi')]"></i>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200px;">
              <template slot-scope="props">
                <el-button
                  v-if="props.row.edit==1&&MOptionCustomBtn.MOptionCustomBtn32"
                  size="mini"
                  type="primary"
                  plain
                  round
                  style="margin-left: 5px;"
                  :disabled="props.row.mtCompanyId==0"
                  @click="MOptioninitUpdate(props.row)"
                >编辑</el-button>

                <el-button size="mini" type="danger" v-if="MOptionCustomBtn.MOptionCustomBtn33" round @click="MOptioninitDelete(props.row)" :disabled="props.row.mtCompanyId==0">删除</el-button>
              </template>
              
            </el-table-column>
          </el-table>
          <div class="pagenation">
            <span>
              <el-pagination
                background
                layout="prev, pager, next, sizes, total, jumper"
                :total="TitleTotal"
                @current-change="click"
                @size-change="handleSizeChange"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pagesize"
              ></el-pagination>
            </span>
          </div>
        </el-tabs>
      </el-row>
    </div>
    

    <!--添加保养项-->
    <div class="SlipAdditions">
      <el-dialog
        :title="isAdd==1?'添加保养项':'编辑保养项'"
        :visible.sync="dialogSlipAdditions"
        width="45%"
        :before-close="handleClose"
      >
        <el-form class="SlipAddition" :model="SlipAddition" :inline="true" label-position="left" :rules="SlipAdditionRule" ref="SlipAddition">
          <el-form-item label="输入维保项目（内容）" style="width:100%" prop="item">
            <el-input placeholder="输入维保项目（内容）" v-model="SlipAddition.item"></el-input>
          </el-form-item>
          <el-form-item label="维保基本要求" style="width:100%"  prop="content">
            <el-input placeholder="输入维保基本要求" v-model="SlipAddition.content"></el-input>
          </el-form-item>
          <el-form-item label="检修位置" style="width:100%"  prop="sort" v-if="showJX"> 
            <el-select placeholder="输入检修位置" v-model="SlipAddition.sort">
              <el-option
                v-for="item in sortList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="默认状态" style="width:100%"  prop="status">
            <el-radio-group v-model="SlipAddition.status">
              <el-radio :label="1">
                <i class="el-icon-circle-check"></i>
              </el-radio>
              <el-radio :label="2">
                <i class="el-icon-circle-close"></i>
              </el-radio>
              <el-radio :label="3">
                <i class="iconfont iconjinzhi"></i>
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer Txc">
          <el-button @click="dialogSlipAdditions = false">取 消</el-button>
          <el-button type="primary" @click="MaintenanceOption('SlipAddition')">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!--删除保养项-->
    <div class="deleteBY">
      <el-dialog title="删除" :visible.sync="dialogdeleteBY" width="30%" :before-close="handleClose">
        <p>确定删除此增项吗？</p>
        <div slot="footer" class="dialog-footer Txc">
          <el-button @click="dialogdeleteBY = false">取 消</el-button>
          <el-button type="primary" @click="deleteMO">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  name: "MOptionCustom",
  data() {
    return {
      //绑定值
      activeName: "first",
      activeName1: "first",
      tableTabIndex: 1,
      showJX:true,
      tableTabType: 1,
      SlipAddition: {
        status: "",
        content: "",
        item: "",
        sort:"",
      },
      sortList:[
        {
          id:1,
          name:"机房"
        },{
          id:2,
          name:"轿顶"
        },{
          id:3,
          name:"轿厢"
        },{
          id:4,
          name:"层门"
        },{
          id:5,
          name:"底坑井道"
        }
      ],
      SlipAdditionRule:{
        status: [{ required: true, message: "请至少选择一项", trigger: "blur" }],
        content: [
          { required: true, message: "维保基本要求不能为空", trigger: "blur" },
        ],
        item: [
          { required: true, message: "维保项目（内容）不能为空", trigger: "blur" },
        ],
        sort: [
          { required: true, message: "检修位置不能为空", trigger: "blur" },
        ],
      },
      handleClose: null,
      //表格数据
      UserDataMOptionCustom: [
      ],
      UserDataMOptionCustomLoad:false,
      TitleTotal:10,
      //分页
      pagesize: 10,
      currpage: 1,
      //模态框
      dialogSlipAdditions: false,
      dialogdeleteBY: false,
      isAdd:1,
      DeleteID:"",
      MOptionCustomBtn:{
        MOptionCustomBtn31:0,
        MOptionCustomBtn32:0,
        MOptionCustomBtn33:0,
      }
    };
  },
  created() {
    this.showMOptionCustomList(1,1,1,10)

    var MOptionCustomBtn = {}
    this.getButton(30).then(result => {
      if (result.data.statusCode==="1") {
        MOptionCustomBtn = result.data.data
        MOptionCustomBtn.map((item)=>{
          if(item.id==31){
            this.MOptionCustomBtn.MOptionCustomBtn31 = item.checked?1:0 
          }else if(item.id==32){
            this.MOptionCustomBtn.MOptionCustomBtn32 = item.checked?1:0  
          }else if(item.id==33){
            this.MOptionCustomBtn.MOptionCustomBtn33 = item.checked?1:0  
          }
        })
      }
    });
  },
  methods: {
    // 分页页码
    click(val) {
      this.currpage = val;
      this.showMOptionCustomList(this.tableTabIndex,this.tableTabType,val,this.pagesize)
    },
    // 分页显示条数
    handleSizeChange(val) {
      this.pagesize = val;
      this.showMOptionCustomList(this.tableTabIndex,this.tableTabType,this.currpage,val)
    },
    //table切换
    ClickTab(tab, event) {
      this.tableTabIndex = tab.$el.id=="pane-first"?1:(tab.$el.id=="pane-second"?2:(tab.$el.id=="pane-third"?3:(tab.$el.id=="pane-fourth"?4:"")));
      this.showMOptionCustomList(this.tableTabIndex,this.tableTabType,this.currpage,this.pagesize)
      if(tab.$el.id=="pane-third"){
        this.showJX = false;
      }else{
        this.showJX = true;
      }
    },
    handleClick(tab, event) {
      this.tableTabType = tab.$el.id=="pane-first"?1:(tab.$el.id=="pane-second"?2:(tab.$el.id=="pane-third"?3:(tab.$el.id=="pane-fourth"?4:"")));
      this.showMOptionCustomList(this.tableTabIndex,this.tableTabType,this.currpage,this.pagesize)
    },
    //表格数据加载
    showMOptionCustomList(LiftType, Type,pageNum,pageSize) {
      this.UserDataMOptionCustomLoad = true;
      var url = "enterprise/maintenance-option/list";
      var param = {
        mtCompanyId:JSON.parse(sessionStorage.getItem('mtCompanyId')),
        liftCategory: LiftType,
        type: Type,
        pageNum:pageNum,
        pageSize:pageSize,
      };
      this.axios.post(url, param).then(result => {
        if (result.statusCode) this.UserDataMOptionCustomLoad = false;
        if (result.statusCode === "1") {
          this.UserDataMOptionCustom = result.data.rows;
          this.TitleTotal = result.data.total
        } else {
          this.$message.error(data.message);
        }
        
      });
    },
    AddMOptioninit(){
      this.SlipAddition = {};
      this.dialogSlipAdditions = true;
      this.isAdd=1;
      console.log(this.SlipAddition)

    },
    //新增编辑接口
    MaintenanceOption(formName){
      this.$refs[formName].validate(valid => {
        if (valid) {
          var param = this.SlipAddition
          var url=""
          if(this.isAdd==1){
            param.mtCompanyId = JSON.parse(sessionStorage.getItem('mtCompanyId'))
            param.type = this.tableTabType
            param.liftCategory = this.tableTabIndex
            url='enterprise/maintenance-option/add'
          }else if(this.isAdd==0){
            url='enterprise/maintenance-option/modify'
          }
          this.axios.post(url,param).then(result => {
            var data = result
            if(data.statusCode==="1"){
              this.$message.success(data.message);
              this.showMOptionCustomList(this.tableTabIndex,this.tableTabType,this.currpage,this.pagesize)
              this.dialogSlipAdditions = false;
            }else{
              this.$message.error(data.message);
            }
          });
          console.log(param);
        } else {
          this.$message({
            message: "请输入正确信息！",
            type: "warning"
          });
          return;
        }
      });
    },
    //编辑
    MOptioninitUpdate(row) {
      this.SlipAddition = ""
      this.SlipAddition = row;
      this.dialogSlipAdditions = true;
      this.isAdd=0;
    },
    //删除
    MOptioninitDelete(row) {
      this.dialogdeleteBY = true;
      this.DeleteID = row.id
    },
    deleteMO(){
      var url = "enterprise/maintenance-option/delete";
      var param = {
        id:this.DeleteID
      };
      this.axios.post(url, param).then(result => {
        var data = result;
        if(data.statusCode==="1"){
          this.$message.success(data.message);
          this.showMOptionCustomList(this.tableTabIndex,this.tableTabType,this.currpage,this.pagesize)
          this.dialogdeleteBY = false;
        }
      });
    }

  }
};
</script>
<style lang="stylus">
.MOptionCustom {
  height: 100%;
  .MOptionCustomMain{
    height: 100%;
    background: #fff;
    .SearchTitle{
      margin: 0 20px 10px 20px;
    }
    
  }
  .SlipAddition {
      label.el-form-item__label {
        width: 165px;
      }
      .el-form-item__content {
          width: 50%;
      }
      
  }
  .cell {
    text-align: center;
  }
  .el-tabs--border-card{
    border:none;
    -webkit-box-shadow:none;
    box-shadow:none
  }

  .el-tabs__header {
    margin: 0 20px 20px 20px;
  }

  .TabType {
    margin: 0 20px 20px;
    font-size: 14px;

    div {
      display: inline-block;

      span {
        cursor: pointer;
      }
    }
    .TypeOption{
      width 40%
    }
    .addOption{
      width 60%
      text-align right
      .el-button{
        padding 10px
        font-size: 12px;
      } 
    }
  }

  .deleteBY {
    p {
      font-size: 16px;
    }

    .el-dialog__body {
      padding: 15px 20px;
    }

    .el-dialog__footer {
      text-align: center;
    }
  }
  
}
i.iconfont.iconjinzhi {
    font-size: 13px;
}
.el-tabs--border-card.BCtabs .el-tabs__header.is-top {
    margin: 10px 20px 0 20px;
}
</style>

