<template>
  <div>
    <!-- 查询配置 -->
    <div>
      <div ref="lxHeader">
        <LxHeader
          icon="md-apps"
          :text="$route.meta.title"
          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
        >
          <div slot="content"></div>
          <slot>
            <header-content :auths="auths_auth_mixin">
              <template #search>
                <div style="display: flex;">
                  <el-date-picker
                    size="small"
                    type="daterange"
                    :clearable="false"
                    v-model="select.filter[2].value"
                    value-format="yyyy-MM-dd"
                    placeholder="日期选择"
                    format="yyyy-MM-dd"
                    style="width: 240px;"
                  ></el-date-picker>
                  <Select multiple
                          clearable
                          :max-tag-count="1"
                          v-model="abilityTemp"
                          placeholder="请选择类别"
                          style="width: 200px;margin-left: 6px;" @on-change="abilityChange">
                    <Option v-for="item in abilities" :value="item.value">{{ item.key }}</Option>
                  </Select>
<!--                  <Select clearable v-model="selectArea" placeholder="请选择范围" style="width: 140px;margin-left: 6px;">-->
<!--                    <Option v-for="item in areas" :value="item.value">{{ item.key }}</Option>-->
<!--                  </Select>-->
                  <Input style="width: 140px;margin-left: 6px;" clearable v-model="select.filter[0].value" placeholder="搜索内容"/>
                  <!--                  <Select-->
                  <!--                    v-model="select.filter[0].key"-->
                  <!--                    style="width: 100px"-->
                  <!--                    placeholder="搜索条目"-->
                  <!--                  >-->
                  <!--                    <Option-->
                  <!--                      v-for="item in form"-->
                  <!--                      :key="item.id"-->
                  <!--                      :value="item.field"-->
                  <!--                    >{{ item.name }}</Option-->
                  <!--                    >-->
                  <!--                  </Select>-->
                  <!--                  <Select-->
                  <!--                    v-model="select.filter[0].op"-->
                  <!--                    style="width: 100px; margin-left: 10px"-->
                  <!--                    placeholder="搜索条件"-->
                  <!--                  >-->
                  <!--                    <Option-->
                  <!--                      v-for="item in op"-->
                  <!--                      :key="item.value"-->
                  <!--                      :value="item.value"-->
                  <!--                    >{{ item.label }}</Option-->
                  <!--                    >-->
                  <!--                  </Select>-->
                  <!--                  <template-->
                  <!--                    v-if="-->
                  <!--                      select.filter[0].op !== 'range' &&-->
                  <!--                      !columnArrTest(select.filter[0].key)-->
                  <!--                    "-->
                  <!--                  >-->
                  <!--                    <Input-->
                  <!--                      v-model="select.filter[0].value"-->
                  <!--                      style="width: 150px; margin-left: 10px"-->
                  <!--                      placeholder="请填写关键词"-->
                  <!--                    />-->
                  <!--                  </template>-->
                  <!--                  <template-->
                  <!--                    v-else-if="-->
                  <!--                      select.filter[0].op !== 'range' &&-->
                  <!--                      columnArrTest(select.filter[0].key)-->
                  <!--                    "-->
                  <!--                  >-->
                  <!--                    <Select-->
                  <!--                      v-model="select.filter[0].value"-->
                  <!--                      style="width: 150px; margin-left: 10px"-->
                  <!--                      placeholder="请选择关键词"-->
                  <!--                    >-->
                  <!--                      <Option-->
                  <!--                        v-for="item in getColumnParams(select.filter[0].key)"-->
                  <!--                        :key="item.id"-->
                  <!--                        :value="-->
                  <!--                          getColumnField(select.filter[0].key)._relations-->
                  <!--                            ? item[-->
                  <!--                                getColumnField(select.filter[0].key)._relations-->
                  <!--                                  .foreign_key-->
                  <!--                              ]-->
                  <!--                            : item.value-->
                  <!--                        "-->
                  <!--                      >{{-->
                  <!--                          item.key ||-->
                  <!--                          item.value ||-->
                  <!--                          item.name ||-->
                  <!--                          item.no ||-->
                  <!--                          item.mingcheng ||-->
                  <!--                          item.id-->
                  <!--                        }}</Option-->
                  <!--                      >-->
                  <!--                    </Select>-->
                  <!--                  </template>-->
                  <!--                  <template v-else>-->
                  <!--                    <Input-->
                  <!--                      :value="select.filter[0].value.split(',')[0]"-->
                  <!--                      style="width: 150px; margin-left: 10px"-->
                  <!--                      placeholder="范围开始关键词"-->
                  <!--                      @input="(e) => inputStartHandler(e, select.filter[0])"-->
                  <!--                    />-->
                  <!--                    <span-->
                  <!--                      style="-->
                  <!--                        margin-left: 10px;-->
                  <!--                        display: flex;-->
                  <!--                        align-items: center;-->
                  <!--                      "-->
                  <!--                    >至</span-->
                  <!--                    >-->
                  <!--                    <Input-->
                  <!--                      :value="select.filter[0].value.split(',')[1]"-->
                  <!--                      style="width: 150px; margin-left: 10px"-->
                  <!--                      placeholder="范围结束关键词"-->
                  <!--                      @input="(e) => inputEndHandler(e, select.filter[0])"-->
                  <!--                    />-->
                  <!--                  </template>-->
<!--                  <el-popover-->
<!--                    placement="bottom-start"-->
<!--                    width="200"-->
<!--                    trigger="click">-->

<!--                    <el-tree :data="equipments"-->
<!--                             ref="elTree"-->
<!--                             :props="{ children: 'children', label: 'name' }"-->
<!--                             show-checkbox-->
<!--                             @check-change="handleCheckChange">-->
<!--                    </el-tree>-->

<!--                    <Input :value="treeValue" slot="reference" style="width: 140px;margin-left: 6px;" readonly placeholder="搜索点位"></Input>-->
<!--                  </el-popover>-->
                  <Button
                    style="margin-left: 10px"
                    type="primary"
                    @click="$refs['xyTable'].getTableData(true)"
                  >查询</Button
                  >

                  <!--                  <xy-selectors-->
                  <!--                    style="margin-left: 10px"-->
                  <!--                    @reset="reset"-->
                  <!--                    @search="$refs['xyTable'].getTableData(true)"-->
                  <!--                  >-->
                  <!--                    <template>-->
                  <!--                      <div class="select">-->
                  <!--                        <div-->
                  <!--                          class="select__item"-->
                  <!--                          v-for="(item, index) in select.filter"-->
                  <!--                          :key="`${item.value}-${index}`"-->
                  <!--                        >-->
                  <!--                          <p>条件{{ index + 1 }}</p>-->
                  <!--                          <Select-->
                  <!--                            v-model="item.key"-->
                  <!--                            style="width: 100px"-->
                  <!--                            placeholder="搜索条目"-->
                  <!--                          >-->
                  <!--                            <Option-->
                  <!--                              v-for="item in form"-->
                  <!--                              :key="item.id"-->
                  <!--                              :value="item.field"-->
                  <!--                            >{{ item.name }}</Option-->
                  <!--                            >-->
                  <!--                          </Select>-->
                  <!--                          <Select-->
                  <!--                            v-model="item.op"-->
                  <!--                            style="width: 100px; margin-left: 10px"-->
                  <!--                            placeholder="搜索条件"-->
                  <!--                          >-->
                  <!--                            <Option-->
                  <!--                              v-for="item in op"-->
                  <!--                              :key="item.value"-->
                  <!--                              :value="item.value"-->
                  <!--                            >{{ item.label }}</Option-->
                  <!--                            >-->
                  <!--                          </Select>-->
                  <!--                          <template-->
                  <!--                            v-if="-->
                  <!--                              item.op !== 'range' && !columnArrTest(item.key)-->
                  <!--                            "-->
                  <!--                          >-->
                  <!--                            <Input-->
                  <!--                              v-model="item.value"-->
                  <!--                              style="width: 150px; margin-left: 10px"-->
                  <!--                              placeholder="请填写关键词"-->
                  <!--                            />-->
                  <!--                          </template>-->
                  <!--                          <template-->
                  <!--                            v-else-if="-->
                  <!--                              item.op !== 'range' && columnArrTest(item.key)-->
                  <!--                            "-->
                  <!--                          >-->
                  <!--                            <Select-->
                  <!--                              v-model="item.value"-->
                  <!--                              style="width: 150px; margin-left: 10px"-->
                  <!--                              placeholder="请选择关键词"-->
                  <!--                            >-->
                  <!--                              <Option-->
                  <!--                                v-for="item in getColumnParams(item.key)"-->
                  <!--                                :key="item.id"-->
                  <!--                                :value="-->
                  <!--                                  getColumnField(item.key)._relations-->
                  <!--                                    ? item[-->
                  <!--                                        getColumnField(item.key)._relations-->
                  <!--                                          .foreign_key-->
                  <!--                                      ]-->
                  <!--                                    : item.value-->
                  <!--                                "-->
                  <!--                              >{{-->
                  <!--                                  item.key ||-->
                  <!--                                  item.value ||-->
                  <!--                                  item.name ||-->
                  <!--                                  item.no ||-->
                  <!--                                  item.mingcheng ||-->
                  <!--                                  item.id-->
                  <!--                                }}</Option-->
                  <!--                              >-->
                  <!--                            </Select>-->
                  <!--                          </template>-->
                  <!--                          <template v-else>-->
                  <!--                            <Input-->
                  <!--                              :value="item.value.split(',')[0]"-->
                  <!--                              style="width: 150px; margin-left: 10px"-->
                  <!--                              placeholder="范围开始关键词"-->
                  <!--                              @input="(e) => inputStartHandler(e, item)"-->
                  <!--                            />-->
                  <!--                            <span style="margin-left: 10px">至</span>-->
                  <!--                            <Input-->
                  <!--                              :value="item.value.split(',')[1]"-->
                  <!--                              style="width: 150px; margin-left: 10px"-->
                  <!--                              placeholder="范围结束关键词"-->
                  <!--                              @input="(e) => inputEndHandler(e, item)"-->
                  <!--                            />-->
                  <!--                          </template>-->
                  <!--                          <el-button-->
                  <!--                            v-if="index !== 0"-->
                  <!--                            size="small"-->
                  <!--                            type="danger"-->
                  <!--                            icon="el-icon-delete"-->
                  <!--                            circle-->
                  <!--                            style="margin-left: 10px"-->
                  <!--                            @click="select.filter.splice(index, 1)"-->
                  <!--                          ></el-button>-->
                  <!--                        </div>-->
                  <!--                      </div>-->
                  <!--                      <div class="add-btn">-->
                  <!--                        <el-button-->
                  <!--                          size="small"-->
                  <!--                          type="primary"-->
                  <!--                          icon="el-icon-plus"-->
                  <!--                          circle-->
                  <!--                          @click="-->
                  <!--                            select.filter.push({ key: '', op: '', value: '' })-->
                  <!--                          "-->
                  <!--                        ></el-button>-->
                  <!--                        <span>新增一条</span>-->
                  <!--                      </div>-->
                  <!--                    </template>-->
                  <!--                  </xy-selectors>-->
                </div>
              </template>
              <template #create>
                <Button
                  type="primary"
                  @click="
                    $refs['dialog'].setType('add'), $refs['dialog'].show()
                  "
                >新增</Button
                >
              </template>
              <template #import>
                <Button type="primary" @click="$refs['imports'].show()"
                >导入</Button
                >
              </template>
              <template #export>
                <Button
                  type="primary"
                  @click="exportExcel(new Date().getTime().toString())"
                >导出</Button
                >
              </template>
            </header-content>
          </slot>
        </LxHeader>
      </div>
    </div>
    <!--$refs['drawer'].setId(row.id);
              $refs['drawer'].show();-->
    <el-row :gutter="10">
      <el-col :span="4">
        <el-tree :data="equipments"
                 node-key="id"
                 :style="{ 'max-height':  treeHeight, 'overflow': 'scroll' }"
                 ref="elTree"
                 :props="{ children: 'children', label: 'name' }"
                 show-checkbox
                 @check="handleCheckChange">
        </el-tree>
      </el-col>
      <el-col :span="20">
        <xy-table
          :span-method="objectSpanMethod"
          :format-list-data="mergeData"
          :btn-width="140"
          :auths="auths_auth_mixin"
          :delay-req="true"
          :destroy-action="destroy"
          ref="xyTable"
          :border="true"
          :action="index"
          :req-opt="tableSelect"
          :destroy-req-opt="select"
          :table-item="table"
          @detail="
        (row) => {
          $router.push({
            path: $route.path + '/detail/' + row.id,
          });
        }
      "
          @editor="
        (row) => {
          $refs['dialog'].setId(row.id);
          $refs['dialog'].setType('editor');
          $refs['dialog'].show();
        }
      "
        >
          <template #callback="{ row }">
            <Button size="small" type="primary" @click="$refs['callbackList'].setId(row.id),$refs['callbackList'].show()">反馈查看</Button>
            <template v-if="row.id_feedbacks_transfer_id_relation.length > 0">
              <Icon type="md-alert" color="#db4f2b" style="margin-left: 6px;font-size: 16px;" />
            </template>
          </template>
        </xy-table>
      </el-col>
    </el-row>

    <callbackList ref="callbackList"></callbackList>
  </div>
</template>

<script>
import { getOaToken } from "@/api/other";
import { index as fieldIndex } from "@/api/system/customFormField";
import { authMixin } from "@/mixin/authMixin";
import { index, destroy, save } from "@/api/system/baseForm";
import { op } from "@/const/op";
import { download } from "@/utils/downloadRequest";
import { getparameter } from "@/api/system/dictionary";
import { show } from "@/api/system/customForm";
import { show as formFieldShow } from "@/api/system/customFormField"
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";
import { listdept } from "@/api/system/department";

import dialoger from "@/views/component/dialog.vue";
import LxHeader from "@/components/LxHeader/index.vue";
import headerContent from "@/components/LxHeader/XyContent.vue";
import drawer from "@/views/component/drawer.vue";
import imports from "@/views/component/imports.vue";
import callback from "@/views/order/component/callback.vue";
import callbackList from "@/views/order/component/callbackList.vue";
import { deepCopy } from "@/utils";
import { mergeTableRow } from "@/utils/mergeTableRow";
export default {
  components: {
    LxHeader,
    dialoger,
    headerContent,
    drawer,
    imports,
    callback,
    callbackList
  },
  mixins: [authMixin],
  provide: {
    formStore: () => this.form,
  },
  data() {
    return {
      areas: [],
      abilities: [],
      abilityTemp: [],
      window: {
        width: 0,
        height: 0,
        top: 0,
        left: 0
      },
      oaToken: "",
      op,
      selectArea: "",
      select: {
        table_name: "",
        filter: [
          {
            key: "content",
            op: "like",
            value: ""
          },
          {
            key: "leibie",
            op: "eq",
            value: ""
          },
          {
            key: "start_time",
            op: "range",
            value: ""
          },
          {
            key: "equipment_id",
            op: "in",
            value: []
          },
          {
            key: "status",
            op: "eq",
            value: 7
          },
          {
            key: "is_adjust",
            op: "eq",
            value: -1
          }
        ],
        sort_name: 'start_time',
      },
      selectQuery: [],
      form: [],
      table: [],
      customForm: {
        customFormId: "",
        tableName: "",
      },


      resetTable: new Map([
        ["start_time",{
          formatter: (data, cell, val)=>{
            return val ? this.$moment(val).format("YYYY-MM-DD HH:mm") : ''
          }
        }],
        ["end_time",{
          formatter: (data, cell, val)=>{
            return val ? this.$moment(val).format("HH:mm") : ''
          }
        }],
        ["shichang",{
          formatter: (data) => {
            return this.$moment(data.end_time).diff(this.$moment(data.start_time),"hours",true) + "小时"
          },
          width: 120
        }]
      ]),
      equipments: [],
      treeValue: ""
    };
  },
  methods: {
    abilityChange (value) {
      this.select.filter[1].value = value.toString()
    },

    handleCheckChange (data, checked, indeterminate) {
      this.treeValue = this.$refs['elTree'].getCheckedNodes(true)?.filter(i => !i.children)?.map(i => i.name).toString()
      this.select.filter[3].value = this.$refs['elTree'].getCheckedNodes(true)?.filter(i => !i.children)?.map(i => i.id)

      this.$refs['xyTable'].getTableData(true)
    },

    async getEquipments () {
      const res = (await index({
        table_name: 'equipments',
        page: 1,
        page_size: 9999
      },false))?.data || []
      this.equipments = this.areas.map(i => ({
        id: `area_${i.value}`,
        name: i.key,
        children: res.filter(j => j.area === i.value)
      }))

      this.$nextTick(() => {
        this.areas.forEach(i => {
          this.$refs['elTree'].setChecked(`area_${i.value}`, true, true)
        })
      })
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const span = column["property"] + "-span";
      if (row[span]) {
        return row[span];
      }
    },

    mergeData(list) {
      return mergeTableRow({
        data: this.selectArea ? list.filter(i => (i.equipment_id_equipments_id_relation?.area === this.selectArea)) : list,
        mergeColNames: ["equipment_id_equipments_id_relation.area","equipment_id_equipments_id_relation.name"], // 需要合并的列，默认合并列相同的数据
        firstMergeColNames: ["equipment_id_equipments_id_relation.area","equipment_id_equipments_id_relation.name"], // 受影响的列，只合并以firstMerge为首的同类型数据
        firstMerge: "equipment_id", // 以哪列为基础进行合并，一般为第一列
      });
    },

    pickNoDistribute () {
      this.$refs['xyTable'].getListData()?.forEach(item => {
        console.log(item)
        if (item.status === 1) {
          this.$refs['xyTable'].toggleRowSelection(item)
        }
      })
    },

    async getArea() {
      const obj = (await formFieldShow({ id: 4 }, false))?.select_item;
      if (obj && typeof obj === "object") {
        let keys = Object.keys(obj);
        if (keys.length > 0) {
          this.areas = keys.map((key) => {
            return {
              key,
              value: /^\d*$/.test(obj[key]) ? Number(obj[key]) : obj[key],
            };
          });
        }
      }
      await this.getEquipments();
    },
    async getAbility() {
      const obj = (await formFieldShow({ id: 31 }, false))?.select_item;
      if (obj && typeof obj === "object") {
        let keys = Object.keys(obj);
        if (keys.length > 0) {
          this.abilities = keys.map((key) => {
            return {
              key,
              value: /^\d*$/.test(obj[key]) ? Number(obj[key]) : obj[key],
            };
          });
        }
      }
    },

    async toOa (row) {
      if (!this.oaToken) {
        this.oaToken = (await getOaToken()).oatoken
      }
      let jsonInfo = {
        'title': row.equipment_id_equipments_id_relation?.name,
        '65aa1a59e408c': row.start_time,
        '65aa1a7e4109d': row.level,
        '65aa1a442705f': row.content
      }
      let url =
        `${process.env.VUE_APP_OA_URL}/admin/flow/create/34?diaoling_oatoken=${this.oaToken}&out_diaoling_id=${row.id}&default_json=${JSON.stringify(jsonInfo)}`
      window.open(url, 'diaoling',
        `top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
      )
    },

    async distributeTransfers () {
      let promiseAll = this.$refs['xyTable'].getSelection().map(i => {
        for (let key in i) {
          if (/_relation/g.test(key)) {
            delete i[key]
          }
        }
        i.status = 2;
        return save({
          table_name: 'transfers',
          ...i
        })
      })
      const res = await Promise.all(promiseAll)
      this.$message({
        type: 'success',
        message: `下发${res.length}条调令`
      })
      this.$refs['xyTable'].getTableData()
    },

    cloneTransfer () {
      this.$router.push({
        name: 'menu_14',
        params: {
          cloneTransfer: this.$refs['xyTable'].getSelection().map(i => ({
            equipment_id: i.equipment_id,
            start_time: this.$moment(i.start_time).format('HH:mm'),
            end_time: this.$moment(i.end_time).format('HH:mm'),
            content: i.content,
            level: i.level,
          }))
        }
      })
    },

    setTransferStatus (status,row) {
      let copyRow = deepCopy(row);
      copyRow.status = status;
      for (let key in copyRow) {
        if (/_relation/g.test(key)) {
          delete copyRow[key]
        }
      }
      save({
        table_name: 'transfers',
        ...copyRow
      }).then(_ => this.$refs['xyTable'].getTableData())
    },

    index,
    destroy,
    download,
    reset() {
      this.select.filter.splice(1);
      this.select.filter[0] = {
        key: "",
        op: "",
        value: "",
      };
    },

    async exportExcel(sheetName) {
      const res = await index(
        Object.assign(this.select, { page: 1, page_size: 9999 })
      );
      if (res.data) {
        let headers = this.form.filter(i => i.list_show).map((i) => {
          return {
            key: i.field,
            title: i.name,
          };
        });
        const data = res.data.map((row) =>
          headers.map((header) => {
            const i = this.form.find(i => i.field === header.key)
            //if (i.edit_input === 'file' || i.edit_input === 'files') return ''
            if (
              i.select_item &&
              typeof i.select_item === "object" &&
              !(i.select_item instanceof Array)
            ) {
              let keys = Object.keys(i.select_item);
              let paramMap = new Map();
              keys.forEach((key) => {
                paramMap.set(i.select_item[key], key);
              });
              return paramMap.get(row[i.field]?.toString());
            }
            if (i._relations) {
              let { link_relation, foreign_key, link_with_name } = i._relations;
              if (link_relation === "newHasOne" || link_relation === "hasOne") {
                return row[link_with_name]?.original_name || row[link_with_name]?.name ||
                    row[link_with_name]?.no ||
                    row[link_with_name]?.value
              }

              if (link_relation === "hasMany" || link_relation === "newHasMany") {
                return row[link_with_name]?.map((o) => (
                  o?.name ||
                  o?.no ||
                  o?.value ||
                  o?.biaoti ||
                  o?.mingcheng
                )).toString()
              }
            }

            return row[header.key]
          })
        );
        data.unshift(headers.map((header) => header.title));
        const wb = XLSX.utils.book_new();
        const ws = XLSX.utils.aoa_to_sheet(data);
        XLSX.utils.book_append_sheet(wb, ws, sheetName);
        const wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });
        saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          `${sheetName}.xlsx`
        );
      }
    },

    //target要为内存地址引用类型
    inputStartHandler(e, target) {
      let temp = target?.value.split(",")[1];
      target.value = `${e},${temp ? temp : ""}`;
    },
    inputEndHandler(e, target) {
      let temp = target?.value.split(",")[0];
      target.value = `${temp ? temp : ""},${e}`;
    },

    async getFormDetail() {
      if (this.$route.meta.params?.custom_form) {
        let decode = decodeURIComponent(this.$route.meta.params?.custom_form);
        try {
          let custom_form = JSON.parse(decode);
          this.customForm.customFormId = custom_form.custom_form_id;
          this.customForm.tableName = custom_form.table_name;
          this.select.table_name = custom_form.table_name;
        } catch (err) {
          console.warn(err);
        }
      }
      if (this.$route.meta.params?.select) {
        try {
          this.selectQuery = JSON.parse(
            decodeURIComponent(this.$route.meta.params?.select)
          );
        } catch (err) {
          console.warn(err);
        }
      }

      const res = await show({ id: this.customForm.customFormId }, false);

      //字段处理
      //初始表白名单
      let baseTable = new Map([
        [
          "departments",
          async () => {
            const res = await listdept();
            return res;
          },
        ],
        ["admins", []],
      ]);
      let { fields, relation } = res;
      let fieldRes = fields.sort((a, b) => a.sort - b.sort);
      if (
        !fields ||
        !relation ||
        !fields instanceof Array ||
        !relation instanceof Array
      ) {
        throw new Error("fields或relation格式错误");
      }
      fieldRes?.forEach((i, index) => {
        i._relations = relation.find((j) => j.custom_form_field === i.field);
        if (i.select_item && typeof i.select_item === "object") {
          let keys = Object.keys(i.select_item);
          if (keys.length > 0) {
            i._params = keys.map((key) => {
              return {
                key,
                value: /^\d*$/.test(i.select_item[key])
                  ? Number(i.select_item[key])
                  : i.select_item[key],
              };
            });
          }
        }
        if (i.edit_input === "file" || i.edit_input === "files") {
          return;
        }
        if (i._relations) {
          if (baseTable.get(i._relations.link_table_name)) {
            baseTable
              .get(i._relations.link_table_name)()
              .then((res) => (i._params = res));
          } else {
            i._params = i._relations.parameter_id
              ? getparameter({ id: i._relations.parameter_id }, false).then(
                (res) => {
                  i._params = res.detail;
                }
              )
              : this.index({
                table_name: i._relations.link_table_name,
                page: 1,
                page_size: 9999,
              }).then((res) => {
                i._params = res.data;
              });
          }
        }
      });
      this.form = fields;
      this.form
        ?.filter((i) => i.list_show)
        .forEach((i) => {
          let linkOb = {};

          if (i.edit_input === "richtext") {
            linkOb.customFn = (row) => {
              return (
                <div
                  style={{ "max-height": "55px", overflow: "scroll" }}
                  domPropsInnerHTML={row[i.field]}
                ></div>
              );
            };
          }
          if (
            i.select_item &&
            typeof i.select_item === "object" &&
            !(i.select_item instanceof Array)
          ) {
            let keys = Object.keys(i.select_item);
            linkOb.customFn = (row) => {
              let paramMap = new Map();
              keys.forEach((key) => {
                paramMap.set(i.select_item[key], key);
              });

              return <span>{paramMap.get(row[i.field]?.toString())}</span>;
            };
          }
          if (i._relations) {
            let { link_relation, foreign_key, link_with_name } = i._relations;
            if (link_relation === "newHasOne" || link_relation === "hasOne") {
              linkOb.customFn = (row) => {
                if (i.edit_input === "file") {
                  return (
                    <img
                      style="height: 40px;"
                      alt={row[link_with_name]?.original_name}
                      src={row[link_with_name]?.url}
                    >
                    </img>
                  );
                } else {
                  return (
                    <span>
                      {row[link_with_name]?.name ||
                        row[link_with_name]?.no ||
                        row[link_with_name]?.value}
                    </span>
                  );
                }
              };
            }

            if (link_relation === "hasMany" || link_relation === "newHasMany") {
              linkOb.customFn = (row) => {
                if (i.edit_input === "files") {
                  return (
                    <div style="display: flex;flex-direction: column;">
                      {row[link_with_name]?.map((o) => (
                        <img alt={o.original_name} src={o?.url}></img>
                      ))}
                    </div>
                  );
                } else {
                  return (
                    <div>
                      {row[link_with_name]?.map((o) => (
                        <p>
                          {o?.name ||
                            o?.no ||
                            o?.value ||
                            o?.biaoti ||
                            o?.mingcheng}
                        </p>
                      ))}
                    </div>
                  );
                }
              };
            }
          }

          let alignLeft = [];
          if (this.resetTable.get(i.field)) {
            this.table.push(Object.assign(
              {
                prop: i.field,
                label: i.name,
                width: i.width,
                align: alignLeft.find((m) => m === i.field) ? "left" : "center",
                fixed: i.is_fixed,
              },
              linkOb,
              this.resetTable.get(i.field)
            ))
            return
          }
          this.table.push(
            Object.assign(
              {
                prop: i.field,
                label: i.name,
                width: i.width,
                align: alignLeft.find((m) => m === i.field) ? "left" : "center",
                fixed: i.is_fixed,
              },
              linkOb
            )
          );
        });
      this.table.unshift({
        width: 100,
        label: "范围",
        prop: "equipment_id_equipments_id_relation.area",
        formatter:(data,row,val) => {
          return this.areas.find(i => i.value === val)?.key
        }
      });
      this.table.unshift({
        type: "index",
        width: 60,
        label: "序号",
        prop: "index"
      });
    },
  },

  computed: {
    columnArrTest() {
      return function (field) {
        return this.form.find((i) => i.field === field)
          ? this.form.find((i) => i.field === field).search_input ===
          "checkbox" ||
          this.form.find((i) => i.field === field).search_input === "radio"
          : false;
      };
    },
    getColumnField() {
      return function (field) {
        return this.form.find((i) => i.field === field)
          ? this.form.find((i) => i.field === field)
          : {};
      };
    },
    getColumnParams() {
      return function (field) {
        return this.form.find((i) => i.field === field)
          ? this.form.find((i) => i.field === field)._params
          : [];
      };
    },

    tableSelect() {
      let filter = [...this.select.filter, ...this.selectQuery];
      return {
        ...this.select,
        filter,
      };
    },

    treeHeight () {
      return (this.$refs['xyTable']?.tableHeight + 36 || 630) + 'px'
    }
  },
  created() {
    this.window.width = screen.availWidth * 0.95
    this.window.height = screen.availHeight * 0.95
    this.window.top = (window.screen.height - 30 - this.window.height) / 2
    this.window.left = (window.screen.width - 10 - this.window.width) / 2

    this.getFormDetail();
    this.getArea();
    this.getAbility();
  },
};
</script>

<style scoped lang="scss">
.select {
  &__item {
    & > p {
      display: inline-block;
      width: 80px;
      text-align: center;
    }

    & + div {
      margin-top: 6px;
    }
  }
}
.add-btn {
  display: flex;
  justify-content: center;
  align-items: center;

  margin-top: 10px;
  & > span {
    padding: 0 10px;
  }
}

a {
  color: red;
  text-decoration: none;
  transition: all 0.2s;
}

a:hover {
  color: red;
  text-decoration: underline;
}
</style>
