<template>
  <div>
    <a-form class="ml10" layout="vertical">
      <a-row>
        <a-form-item :label="$t('functional-analysis.add-modal.name')">
          <a-input v-model="name" allowClear :placeholder="$t('functional-analysis.add-modal.please-enter-name')"/>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="search">
            {{ $t('global-btn.search') }}
          </a-button>
        </a-form-item>
      </a-row>
      <a-row>
        <a-form-item>
          <a-checkbox-group
              v-model="checkedList"
              :defaultValue="checkList.map((item) => {  return item.value; })"
              :options="checkList"
              @change="boxChange"/>
        </a-form-item>
      </a-row>
    </a-form>
    <div>
      <a-table
          :data-source="tableData"
          :columns="tableColumns"
          :customRow="customRow"
          :rowKey="(row, index) => {return row.pdId;}"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
          bordered
          size="small"
          :scroll="{ y: 'calc(88vh - 400px)' }"
          :pagination="false"/>
    </div>
  </div>
</template>

<script>

export default {
  name: "AddParameter",
  props: {
    struTypeCode: {
      default: '',
      type: String
    },
    struId: {
      default: '',
      type: String
    }
  },
  watch: {
    selectedRows(data) {
      this.$emit("dataChange", data);
    },
  },
  data() {
    return {
      tableData: [],
      tableColumns: [
        {
          title: () => this.$t('functional-analysis.add-modal.name'),
          align: "center",
          dataIndex: "name",
          width: 500,
          key: "name",
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.add-modal.type'),
          align: "center",
          dataIndex: "type",
          key: "type",
          ellipsis: true
        }
      ],
      name: '',
      selectedRowKeys: [],
      selectedRows: [],
      outputChecked: true,
      checkList: [],
      selectedList: [],
      checkedList: [],
    };
  },

  mounted() {
    this.list(true);
  },
  methods: {
    /**
     * 搜索
     */
    search() {
      this.list(false);
    },
    /**
     * 列表
     */
    list(firstFlag) {
      let _that = this;
      _that.$api.funAnalysisPdInit({
        fmeaId: _that.$store.getters.rfmeaId,
        struId: _that.struId,
        struTypeCode: _that.struTypeCode,
        name: _that.name,
        branchFlag: firstFlag ? '1' : null,
        pdCodes: firstFlag ? null : _that.checkedList.toString()
      }).then((res) => {
        if (res.flag) {
          _that.tableData = res.data.rdfmPdModels;
          // 处理默认选择
          _that.tableData.forEach((item) => {
            if (item.checkFlag === '0') {
              _that.selectedRowKeys.push(item.pdId);
            }
          });
          if (res.data.rdfmSwitchModels && res.data.rdfmSwitchModels.length > 0) {
            if (firstFlag) {
              _that.checkList = res.data.rdfmSwitchModels.map((item) => {
                let data = {};
                data.label = item.name;
                data.value = item.value;
                return data;
              });
              _that.checkedList = res.data.rdfmSwitchModels.map((item) => {
                return item.value;
              });
            }
          }

        } else {
          _that.$message.error(res.message, 1);
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message, 1);
      })
    },
    /**
     * 单选框改变事件
     */
    radioChange(e) {
      this.$emit('update:selectType', e.target.value);
    },
    /**
     * 复选框改变事件
     */
    onSelectChange(selectedRowKeys, row) {
      this.selectedRows = row;
      this.selectedRowKeys = selectedRowKeys;
    },
    /**
     * 行点击事件
     */
    customRow(record, index) {
      let _that = this;
      return {
        on: {
          // 鼠标单击行
          click: () => {
            if (_that.selectedRowKeys.indexOf(index) !== -1) {
              _that.selectedRows.splice(_that.selectedRowKeys.indexOf(index), 1);
              _that.selectedRowKeys.splice(_that.selectedRowKeys.indexOf(index), 1);
            } else {
              _that.selectedRowKeys.push(index)
              _that.selectedRows.push(record);
            }
          }
        }
      };
    },
    boxChange(checkList) {
      console.log(checkList);
    }
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-table-tbody {
  .ant-table-row-cell-ellipsis:nth-of-type(2) {
    text-align: left !important;
  }
}

/*/deep/ .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
  overflow-y: auto !important;
}*/
</style>
