<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-05-17 10:41:20
-->
<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.$route.query.viewtype ? (
                  <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).slice(1, dataList.length)
          this.column = _.cloneDeep(dataList);
        } else if (newVal == "1" || newVal == "3") {
          this.column = dataList;
        } else {
          this.column = _.cloneDeep(dataList);
          this.column.splice(2, 0, {
            prop: "fs",
            label: "份数",
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    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++;
    },
    // 新增
    addClick() {
      if (this.gyfs == "0" && this.tableDataList.length > 0) {
        this.$message.warning("当前共有方式为单独所有，无法添加多个权利人");
      } else {
        this.dialog = true;
        this.isaddupdate = true;
      }
    },

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

    // 身份证读取
    readClick() {},

    // 身份证读取按钮禁用
    onreadClick() {
      this.$message.error("此阶段不可编辑");
    },
    // 修改
    editClick(index, row) {
      //   popupDialog("申请人信息", "workflow/components/addQlr", {
      //     showButton: this.$route.query.viewtype ? false : true,
      //   dataIndex :index,
      //  details :row,
      //  isaddupdate :false
      // });
      this.dataIndex = index;
      this.dialog = true;
      this.details = row;
      this.isaddupdate = false;
    },
    queryViewClick(index, row) {
      //   popupDialog("申请人信息", "workflow/components/addQlr", {
      //     showButton: this.$route.query.viewtype ? false : true,
      //   details: row,
      // });
      this.dialog = true;
      this.details = row;
    },
  },
};
</script>
<style scoped lang="scss"></style>