<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span style="font-weight:bold">权限</span>
        <div style="float: right; padding: 3px 0" type="text">
          <el-button size="mini" plain @click="btnBack">返回</el-button>
          <el-button size="mini" plain @click="btnPreviou">上一个</el-button>
          <el-button size="mini" plain @click="btnNext">下一个</el-button>
        </div>
      </div>
      <div v-loading="loading">
        <el-descriptions :column="6">
          <!-- <el-descriptions-item label="员工编号">{{form.staff}}</el-descriptions-item> -->
          <el-descriptions-item label="员工姓名">{{form.staffName}}</el-descriptions-item>
        </el-descriptions>
        <el-row>
          <el-col :span="4">
            客户权限
          </el-col>
          <el-col :span="20">
            <div style="float:right">
              <el-button type="primary" size="mini" @click="btnAddPowerCustomers">新增</el-button>
            </div>
          </el-col>
        </el-row>
        <el-table size="mini" :data="form.powerCustomerss" v-if="pageState == 'see'" :key="refreshTable" @row-click="btnClickZiRow"  highlight-current-row>
          <el-table-column width="50" label="序号" align="center" type="index" />
          <!-- <el-table-column width="300" label="客户" align="center" prop="customers" /> -->
          <el-table-column width="300" label="客户名称" align="center" prop="customersName" />
          <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="btnDelPowerCustomers(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="4">
            产线权限
          </el-col>
          <el-col :span="20">
            <div style="float:right">
              <el-button type="primary" size="mini" @click="btnAddPowerProducts">新增</el-button>
            </div>
          </el-col>
        </el-row>
        <el-table size="mini" :data="powerProducts" v-if="pageState == 'see'" :key="refreshTable">
          <el-table-column width="50" label="序号" align="center" type="index" />
          <!-- <el-table-column width="300" label="产线" align="center" prop="product" /> -->
          <el-table-column width="300" label="产线名称" align="center" prop="productName" />
          <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="btnDelPowerProduct(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 添加客户权限对话框 -->
    <el-dialog title="新增" :visible.sync="openPc" width="500px" append-to-body :show-close="false">
      <el-form ref="formPc" :model="formPc" :rules="rulesPc" label-width="80px">
        <el-form-item label="客户" prop="customersName">
          <el-popover-select-v2 
            size="mini" 
            v-model="formPc.customersName" 
            title="客户" 
            valueKey="name"
            referName="MkCustomerRule" 
            :dataMapping="{customers:'id',customersName: 'name'}"
            :source.sync="formPc"
          >
          </el-popover-select-v2>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="btnSubmitFormPc">确 定</el-button>
        <el-button size="mini" @click="btnCancelPc">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加产线权限对话框 -->
    <el-dialog title="新增" :visible.sync="openPp" width="500px" append-to-body :show-close="false">
      <el-form ref="formPp" :model="formPp" :rules="rulesPp" label-width="80px">
        <el-form-item label="产线" prop="productName">
          <el-popover-tree-select v-model="formPp.productName" valueKey='name' title="产线"
              referName="PRODUCTLINE" :dataMapping="{ product: 'id', productName: 'name'}" :source.sync="formPp"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="btnSubmitFormPp">确 定</el-button>
        <el-button size="mini" @click="btnCancelPp">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPower,addPowerCustomers,delPowerCustomers,addPowerProduct,delPowerProduct} from "@/api/business/spd/bo/power";
import ElPopoverSelectV2 from "@/components/popover-select-v2";
import ElPopoverTreeSelect from "@/components/popover-tree-select/index.vue"
export default {
  name: 'detail',
  props: ['enterState','rowId',"ids"],
  components: { ElPopoverSelectV2,ElPopoverTreeSelect},
  model: {
    prop: 'isList',
    event: 'jugislist'
  },
  data() {
    return {
      //id
      id:null,
      //表单
      form:{},
      //删除的子表数据
      delItems:[],
      //表单校验规则
      formRules:{
      },
      //遮罩
      loading: false,
      //页面状态
      pageState: null,
      //刷新表格标记
      refreshTable:0,

      //新增子表表单
      formPc:{},
      //是否打开子表表单弹窗
      openPc:false,
      //子表表单校验
      rulesPc:{
        customersName: [
          { required: true, message: "客户必输", trigger: "blur" },
        ],
      },
      
      //当前点击的子表
      ziRow:{},
      //当前孙表
      powerProducts:[],

      //新增孙表表单
      formPp:{},
      //是否打开孙表表单弹窗
      openPp:false,
      //孙表表单校验
      rulesPp:{
        productName: [
          { required: true, message: "产线必输", trigger: "blur" },
        ],
      },
    }
  },
  async created() {
    this.pageState = this.enterState;
    this.id = this.rowId;
    this.fetchPower(this.id);
    if(this.enterState == 'add'){
    }
    if(this.enterState == 'edit' || this.enterState == 'see') {
    }
  },
  watch: {
  },
  methods: {
    //返回
    btnBack(){
      this.$emit('jugislist', true)
      this.$emit('refresh')
    },
    //查询详情
    async fetchPower(id){
      this.loading = true;
      await getPower(id).then(res => {
        if (res.code === 200) {
          this.form = res.data;
          this.id = res.data.id;
          this.refreshTable++;
         }
         this.loading = false;
      })
    },
    //上一个
    btnPreviou(){
      this.pageState = "see";
      let i = this.ids.indexOf(this.id) - 1;
      if(i > -1){
        let id = this.ids[i];
        this.fetchPower(id);
      }else{
        this.$modal.msgSuccess("已经是当前页第一条了！");
      }
    },
    //下一个
    btnNext(){
      this.pageState = "see";
      let i = this.ids.indexOf(this.id) + 1;
      if(i < this.ids.length){
        let id = this.ids[i];
        this.fetchPower(id);
      }else{
        this.$modal.msgSuccess("已经是当前页最后一条了！");
      }
    },
    //新增客户维度权限
    btnAddPowerCustomers(){
      this.btnResetPc();
      this.openPc = true;
    },
    // 子表表单重置
    btnResetPc() {
      this.formPc = {
        id: null,
        powerId: null,
        customers: null,
        customersName: null,
        tenantId: null,
        revision: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null
      };
      this.resetForm("formPc");
    },
    // 取消按钮
    btnCancelPc() {
      this.openPc = false;
      this.btnResetPc();
    },
    //确定按钮
    btnSubmitFormPc() {
      this.$refs["formPc"].validate(valid => {
        if (valid) {
          this.formPc.powerId = this.form.id;
          addPowerCustomers(this.formPc).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.openPc = false;
            this.fetchPower(this.id);
          });
        }
      });
    },
    //删除按钮
    btnDelPowerCustomers(row){
      this.$modal.confirm('是否确认删除？').then(function () {
        return delPowerCustomers(row.id);
      }).then(() => {
        this.fetchPower(this.id);
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    //点击子表行
    btnClickZiRow(row){
      this.ziRow = row;
      this.powerProducts = row.powerProducts;
    },
    //新增客户维度权限
    btnAddPowerProducts(){
      console.log('this.ziRow.id',this.ziRow.id);
      if(!(this.ziRow.id)){
        this.$modal.msgWarning("请选择一个客户！");
        return;
      }
      this.btnResetPp();
      this.openPp = true;
    },
    // 孙表表单重置
    btnResetPp() {
      this.formPp = {
        id: null,
        powerCustomersId: null,
        product: null,
        productName: null,
        tenantId: null,
        revision: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null
      };
      this.resetForm("formPp");
    },
    // 取消按钮
    btnCancelPp() {
      this.openPp = false;
      this.btnResetPp();
    },
    //确定按钮
    btnSubmitFormPp() {
      this.$refs["formPp"].validate(valid => {
        if (valid) {
          this.formPp.powerCustomersId = this.ziRow.id;
          console.log('this.formPp',this.formPp);
          addPowerProduct(this.formPp).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.openPp = false;
            this.fetchPower(this.id);
          });
        }
      });
    },
    //删除按钮
    btnDelPowerProduct(row){
      this.$modal.confirm('是否确认删除？').then(function () {
        return delPowerProduct(row.id);
      }).then(() => {
        this.fetchPower(this.id);
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
  }
}
</script>

<style lang="scss" scoped>
.footer {
  z-index: 500;
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 100%;
  line-height: var(--footer-height);
  text-align: right;
}
</style>
