<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-08-01 17:33:26
-->
<template>
  <div>
    <lb-table
      :column="column"
      :pagination="false"
      :key="key"
      :heightNumSetting="true"
      :minHeight="150"
      :data="tableDataList">
    </lb-table>
    <addQlr
      v-model="dialog"
      :details="details"
      :showButton="showButton"
      @updateDetail="handleupdateDetail" />
  </div>
</template>
<script>
  import addQlr from "./dialog/addQlr.vue";
  import { mapGetters } from "vuex";
  export default {
    components: {
      addQlr,
    },
    computed: {
      ...mapGetters(["dictData"]),
    },
    props: {
      tableData: {
        type: Array,
        default: function () {
          return [];
        },
      },
      ableOperation: {
        type: Boolean,
        default: false,
      },
      gyfs: {
        type: String,
        default: "1",
      },
    },
    data () {
      return {
        key: 0,
        dataIndex: 0,
        dialog: false,
        isaddupdate: false,
        showButton: this.ableOperation,
        details: {},
        tableDataList: [],
        InformationTable: [
          {
            width: "50",
            renderHeader: (h, scope) => {
              return (
                <div>
                  {" "}
                  {!this.ableOperation ? (
                    "序号"
                  ) : (
                    <i
                      class="el-icon-plus pointer"
                      onClick={() => {
                        this.addClick();
                      }}
                    ></i>
                  )}
                </div>
              );
            },
            render: (h, scope) => {
              return (
                <div>
                  {!this.ableOperation ? (
                    <span>{scope.$index + 1}</span>
                  ) : (
                    <i
                      class="el-icon-minus pointer"
                      onClick={() => {
                        this.deleClick(scope.$index, scope.row);
                      }}
                    ></i>
                  )}
                </div>
              );
            },
          },
          {
            label: "身份证读卡器",
            align: "center",
            render: (h, scope) => {
              return (
                <el-button
                  type="text"
                  icon="el-icon-tickets"
                  disabled={!this.ableOperation}
                  onClick={() => {
                    this.readClick(scope);
                  }}
                >
                  读取
                </el-button>
              );
            },
          },
          {
            prop: "qlrmc",
            label: "姓名/名称",
          },
          {
            prop: "zjzl",
            label: "证件种类",
            render: (h, scope) => {
              return (
                this.dictData["A30"] &&
                this.dictData["A30"].map((option) => {
                  if (option.dcode == scope.row.zjzl) {
                    return <span>{option.dname}</span>;
                  }
                })
              );
            },
          },
          {
            prop: "zjh",
            label: "证件号",
          },
          {
            prop: "dh",
            label: "联系电话",
          },
          {
            label: "操作",
            render: (h, scope) => {
              return (
                <div>
                  {!this.showButton ? (
                    <el-button
                      icon="el-icon-view"
                      type="text"
                      onClick={() => {
                        this.queryViewClick(scope.$index, scope.row);
                      }}
                      disabled={!this.ableOperation}
                    >
                      {" "}
                      查看
                    </el-button>
                  ) : (
                    <el-button
                      icon="el-icon-edit-outline"
                      type="text"
                      onClick={() => {
                        this.editClick(scope.$index, scope.row);
                      }}
                      disabled={!this.ableOperation}
                    >
                      编辑
                    </el-button>
                  )}
                </div>
              );
            },
          },
        ],
        column: [],
      };
    },
    watch: {
      tableData: {
        handler: function (val, oldVal) {
          let that = this;
          this.$nextTick(() => {
            if (val.length == 0 || !val) {
              that.tableDataList = _.cloneDeep([
                {
                  qlrmc: "",
                  dlrzjlx: "",
                  dlrzjh: "",
                  fr: "",
                },
              ]);
            } else {
              that.tableDataList = _.cloneDeep(val);
            }
          });
        },
        immediate: true,
        deep: true,
      },
      gyfs: {
        handler (newVal, oldValue) {
          let dataList = _.cloneDeep(this.InformationTable);
          if (newVal == 0) {
            this.column = _.cloneDeep(dataList);
            this.tableDataList = _.cloneDeep(this.tableData);
          } else if (newVal == "1" || newVal == "3") {
            this.column = dataList;
          } else {
            this.column = _.cloneDeep(dataList);
            this.column.splice(2, 0, {
              prop: "fs",
              label: "份数",
            });
          }
        },
        immediate: true,
        deep: true,
      },
    },
    methods: {
      /**
       * @handleupdateDetail: 删除
       * @param {*} value
       * @author: renchao
       */
      handleupdateDetail (value) {
        if (this.isaddupdate) {
          if (!_.isEqual(value, this.tableData)) {
            this.tableDataList[this.tableDataList.length] = _.cloneDeep(value);
            this.$emit("upDateQlrxxList", this.tableDataList);
          }
        } else {
          if (!_.isEqual(value, this.tableData)) {
            this.tableDataList[this.dataIndex] = _.cloneDeep(value);
            this.$emit("upDateQlrxxList", this.tableDataList);
          }
        }
        this.key++;
      },
      /**
       * @description: 新增
       * @author: renchao
       */
      addClick () {
        if (this.gyfs == "0" && this.tableDataList.length > 0) {
          this.$message.warning("当前共有方式为单独所有，无法添加多个权利人");
        } else {
          this.dialog = true;
          this.isaddupdate = true;
        }
      },

      // 删除
      /**
       * @description: 删除
       * @param {*} index
       * @param {*} row
       * @author: renchao
       */
      deleClick (index, row) {
        this.$confirm("确定要删除吗, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.tableData.splice(index, 1);
          })
          .catch(() => { });
      },

      // 身份证读取
      /**
       * @description: 身份证读取
       * @author: renchao
       */
      readClick () { },

      // 身份证读取按钮禁用
      /**
       * @description: 身份证读取按钮禁用
       * @author: renchao
       */
      onreadClick () {
        this.$message.error("此阶段不可编辑");
      },
      // 修改
      /**
       * @description: 修改
       * @param {*} index
       * @param {*} row
       * @author: renchao
       */
      editClick (index, row) {
        this.dataIndex = index;
        this.dialog = true;
        this.details = row;
        this.isaddupdate = false;
      },
      /**
       * @description: queryViewClick
       * @param {*} index
       * @param {*} row
       * @author: renchao
       */
      queryViewClick (index, row) {
        this.dialog = true;
        this.details = row;
      },
    },
  };
</script>
<style scoped lang="scss"></style>