<template>
  <div>
    <a-card>
      <a-form layout="vertical">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item
              :label="$t('functional-analysis.top-modal.fmea-number')"
            >
              <a-input
                allow-clear
                @change="dfmeaCodeChange"
                :placeholder="
                  $t('functional-analysis.top-modal.please-enter-fmea-number')
                "
              />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('functional-analysis.top-modal.part-name')">
              <a-input
                allow-clear
                @change="partNameChange"
                :placeholder="
                  $t('functional-analysis.top-modal.please-enter-part-name')
                "
              />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
              <a-form-item :label="$t('functional-analysis.top-modal.owner')">
                <a-input
                  allow-clear
                  @change="ownerChange"
                  :placeholder="
                    $t('functional-analysis.top-modal.please-enter-owner')
                  "
                />
              </a-form-item>
            </a-col>
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
              <a-form-item
                  :label="$t('functional-analysis.top-modal.fmea-type')"
              >
                <a-select
                    allow-clear
                    :defaultValue="'3'"
                    @change="fmeaTypeChange"
                    :placeholder="
                    $t('functional-analysis.top-modal.please-select-fmea-type')
                  "
                >
                  <a-select-option
                      v-for="(item, index) in fmeaTypeDict"
                      :key="index"
                      :value="item.value"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          <span v-show="advanceExpand">
            <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
              <a-form-item
                :label="$t('functional-analysis.top-modal.create-date')"
              >
                <a-range-picker
                  class="width100"
                  allow-clear
                  @change="createDateChange"
                />
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
              <a-form-item :label="$t('functional-analysis.top-modal.creator')">
                <a-input
                    allow-clear
                    @change="createUserChange"
                    :placeholder="
                    $t('functional-analysis.top-modal.please-enter-creator')
                  "
                />
              </a-form-item>
            </a-col>
          </span>
          <a-col
            :xl="advanceExpand ? 12 : 24"
            :lg="advanceExpand ? 24 : 16"
            :md="24"
            :sm="24"
            :xs="24"
          >
            <a-form-item class="tr" :label="'\xa0'">
              <a @click="toggleAdvance">
                {{
                  advanceExpand ? $t("global.collapse") : $t("global.expand")
                }}
                <a-icon :type="advanceExpand ? 'up' : 'down'" />
              </a>
              <a-button class="ml10" @click="search" type="primary">
                {{ $t("global-btn.search") }}
              </a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card>
      <a-table
        :data-source="tableData"
        :columns="tableColumns"
        :customRow="customRow"
        :rowKey="
          (row, index) => {
            return index;
          }
        "
        :rowSelection="{
          type: 'radio',
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange
        }"
        bordered
        size="small"
        :loading="tableLoading"
        :scroll="{ x: 750, y: 'calc(88vh - 400px)' }"
        @change="tableChange"
        :pagination="pagination"
      >
      </a-table>
    </a-card>
    <div slot="footer" v-if="this.$api.isLook !== '1'" class="mt10 text-right">
      <a-button @click="closeModal">
        {{ $t("global-btn.cancel") }}
      </a-button>
      <a-button
        type="primary"
        class="ml10"
        @click="save()"
        :loading="saveLoading"
        v-preventReClick
      >
        {{ $t("global-btn.confirm") }}
      </a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "ViewSideBySide",
  components: {},
  props: {},
  watch: {},
  mounted() {
    this.list();
  },
  data() {
    return {
      /** FMEA类型字典Dict */
      fmeaTypeDict: [
        { value: "3", name: this.$t("global-dict.master-fmea") },
        { value: "1", name: this.$t("global-dict.project-dfmea") }
      ],
      /** 表格数据 */
      tableData: [],
      /** 表格列头 */
      tableColumns: [
        {
          title: () => this.$t("functional-analysis.top-modal.fmea-number"),
          width: 200,
          dataIndex: "dfmeaCode",
          align: "center",
          ellipsis: true
        },
        {
          title: () =>
            this.$t("functional-analysis.top-modal.part-system-name"),
          width: 200,
          dataIndex: "partName",
          align: "center",
          ellipsis: true
        },
        {
          title: () => this.$t("functional-analysis.top-modal.owner"),
          width: 150,
          dataIndex: "dfmeaOwnerName",
          align: "center",
          ellipsis: true
        },
        {
          title: () => this.$t("functional-analysis.top-modal.creator"),
          width: 100,
          dataIndex: "userName",
          align: "center",
          ellipsis: true
        },
        {
          title: () => this.$t("functional-analysis.top-modal.create-date"),
          width: 100,
          dataIndex: "insertTime",
          align: "center",
          ellipsis: true
        },
        {
          title: () => this.$t("functional-analysis.top-modal.update-time"),
          width: 100,
          dataIndex: "updateTime",
          align: "center",
          ellipsis: true
        }
      ],
      /** 表格分页 */
      pagination: {
        current: 1, // 当前页数
        pageSize: 10, // 每页条数
        showTotal: total =>
          this.$t("global-constant.table.show-total", [total]), //用于显示数据总量和当前数据顺序
        showSizeChanger: true, // 是否可以改变 pageSize
        pageSizeOptions: ["10", "20", "50", "100", "200"], // 指定每页可以显示多少条
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize), // pageSize 变化的回调
        total: 0 // 总条数
      },
      /** 指定选中项的：key数组 */
      selectedRowKeys: [],
      /** 指定选中项的：数组数据 */
      selectedRow: {},
      /** 表格Loading */
      tableLoading: false,
      /** 保存Loading */
      saveLoading: false,
      /** 检索条件 */
      searchParams: {
        /** FMEA标识 */
        fmeaId: this.$store.getters.fmeaId,
        /** FMEA编号 */
        dfmeaCode: undefined,
        /** 零件名称 */
        partName: undefined,
        /** Owner */
        owner: undefined,
        /** 创建者 */
        createUser: undefined,
        /** 创建日期 */
        createTimeStart: undefined,
        createTimeEnd: undefined,
        /** fmea类型 */
        fmeaType: '3'
      },
      advanceExpand: false
    };
  },
  methods: {
    // 收起/展开
    toggleAdvance() {
      this.advanceExpand = !this.advanceExpand;
    },
    /**
     * 关闭模态框
     */
    closeModal() {
      this.$emit("closeModal");
    },
    /**
     * 打开并排查看
     */
    openViewSideBySide() {
      this.$emit("openViewSideBySide");
    },
    /**
     * 搜索
     */
    search() {
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.list();
    },
    /**
     * 列表
     */
    list() {
      let _that = this;
      _that.tableLoading = true;
      let data = {
          fmeaId: this.$store.getters.fmeaId,
          dfmeaCode: _that.searchParams.dfmeaCode,
          partName: _that.searchParams.partName,
          owner: _that.searchParams.owner,
          createUser: _that.searchParams.createUser,
          createTimeStart: _that.searchParams.createTimeStart,
          createTimeEnd: _that.searchParams.createTimeEnd,
          fmeaType: _that.searchParams.fmeaType,
          pageNo: _that.pagination.current,
          pageSize: _that.pagination.pageSize,
        }
      _that.$api.getViewSideBySide(data).then(res => {
          if (res.flag) {
            _that.selectedRowKeys = [];
            _that.selectedRow = {};
            _that.tableData = res.data.data;
            _that.pagination.current = res.data.pageNo;
            _that.pagination.pageSize = res.data.pageSize;
            _that.pagination.total = res.data.total;
          } else {
            _that.$message.error(res.message, 1);
          }
        })
        .catch(error => {
          _that.$message.error(error.response.data.message, 1);
        })
        .finally(() => {
          _that.tableLoading = false;
        });
    },

    /**
     * 判断是否选择自己
     */
    exclude() {
      let _that = this;
      if (_that.$route.query.fmeaId == _that.selectedRow.fmeaId) {
        return false;
      } else {
        return true;
      }
    },

    /**
     * 校验保存数据
     */
    validateSaveData() {
      let _that = this;
      if (!this.selectedRow.rfmeaId) {
        _that.$message.warning(
          this.$t("global-message.warn.please-select-a-piece-of-data"),
          1
        );
        return false;
      }
      return true;
    },
    /**
     * 保存
     */
    save() {
      let _that = this;
      if (!_that.exclude()) {
        _that.$message.warning(
          this.$t("global-message.warn.can-not-choose-same"),
          1
        );
        return;
      }
      // 校验
      if (!_that.validateSaveData()) return;
      // 缓存选中rfmeaId
      _that.$store.dispatch("fmeaTree/set", {
        key: "sideRfmeaId",
        value: this.selectedRow.rfmeaId
      });
      _that.$store.dispatch("fmeaTree/clearSide");
      _that.openViewSideBySide();
      _that.closeModal();
    },
    /**
     * FMEA编号输入事件时
     * @param e
     */
    dfmeaCodeChange(e) {
      this.searchParams.dfmeaCode = e.target.value || undefined;
    },
    /**
     * 零件名称输入事件时
     * @param e
     */
    partNameChange(e) {
      this.searchParams.partName = e.target.value || undefined;
    },
    /**
     * Owner输入事件时
     * @param e
     */
    ownerChange(e) {
      this.searchParams.owner = e.target.value || undefined;
    },
    /**
     * 创建者输入事件时
     * @param e
     */
    createUserChange(e) {
      this.searchParams.createUser = e.target.value || undefined;
    },
    /**
     * 创建时间选择事件时
     * @param date
     * @param dateString
     */
    createDateChange(date, dateString) {
      this.searchParams.createTimeStart = dateString[0] || undefined;
      this.searchParams.createTimeEnd = dateString[1] || undefined;
    },
    /**
     * FMEA类型选择事件时
     * @param val
     */
    fmeaTypeChange(val) {
      this.searchParams.fmeaType = val;
    },
    /**
     * 表格点击分页中数字触发的方法
     * @param pagination 分页
     * @param filters 过滤
     * @param sorter 排序
     * @param currentDataSource 当前数据源
     */
    tableChange(pagination, filters, sorter, { currentDataSource }) {
      let _that = this;
      _that.pagination.current = pagination.current;
      _that.pagination.pageSize = pagination.pageSize;
      _that.searchParams.pageNo = pagination.current;
      _that.searchParams.pageSize = pagination.pageSize;
      _that.list();
    },
    /**
     * 单选框改变事件
     * @param selectedRowKeys
     * @param selectedRows
     */
    onSelectChange(selectedRowKeys, selectedRows) {
      let row = selectedRows[0];
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRow = row;
    },
    /**
     * 操作行回调
     */
    customRow(record, index) {
      let _that = this;
      return {
        on: {
          // 鼠标单击行
          click: () => {
            _that.selectedRowKeys = [index];
            _that.selectedRow = record;
          }
        }
      };
    }
  },
  destroyed() {
    this.closeModal();
  }
};
</script>

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

  .ant-table-row-cell-ellipsis:nth-of-type(3) {
    text-align: left !important;
  }
}
</style>
