<!--
 * @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>
    <addYwr
      v-model="dialog"
      :details="details"
      :showButton="showButton"
      @updateDetail="handleupdateDetail"
    />
  </div>
</template>
<script>
import addYwr from "./dialog/addYwr.vue";
import { mapGetters } from "vuex";
export default {
  components: {
    addYwr,
  },
  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: "ywrmc",
          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([
              {
                ywrmc: "",
                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: {
    /**
     * @description: 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: 修改
     * @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>