<template>
  <app-dialog
    v-model="visible"
    :loading="loading"
    :title="title"
    append-to-body
    class="detail-dialog"
    fullscreen
    hide-footer
    @cancel="onCancel"
    @confirm="onConfirm"
  >
    <div v-if="data" class="page-view border-radius-5 h-100 flex-col overflow-h">
      <div class="page-view border-radius-5 h-100 bg-white pa-11 flex-col">
        <div class="mb-10 flex flex-gap-10">
          <el-button type="primary" @click="addAttrRows">
            <el-tooltip class="item" content="按F2可快速添加字段" effect="dark" placement="top">
              <i class="icon-question" style="margin-right: 8px" />
            </el-tooltip>
            添加字段
          </el-button>

          <el-popover v-if="!data.deployed" v-model="uploadVisible" placement="bottom">
            <p>请先下载模板，填写完成后上传</p>
            <div class="text-c flex-row-c">
              <el-button class="mr-10" plain type="primary" @click="download">下载模板</el-button>
              <el-upload
                ref="upload"
                :action="actionUrl"
                :before-upload="beforeUpload"
                :data="importData"
                :headers="headers"
                :multiple="false"
                :on-error="handleError"
                :on-success="handleSuccess"
                :show-file-list="false"
              >
                <el-button size="mini" type="primary">导入字段</el-button>
              </el-upload>
            </div>
            <el-button slot="reference" :loading="uploadLoading" class="ml-10" icon="el-icon-upload2" type="primary"> 导入字段 </el-button>
          </el-popover>
        </div>
        <div class="flex-1 overflow-h">
          <el-form ref="form" :model="form" :rule="fieldsRules" class="h-100" size="medium">
            <el-table ref="attrTableScrollbarHeight" v-loading="tableLoading" :data="form.attrData" border height="100%" style="width: 100%">
              <el-table-column align="center" fixed="left" label="序号" type="index" width="50" />
              <el-table-column align="center" fixed="left" label="名称" min-width="160" resizable>
                <template v-slot="{ row, $index }">
                  <el-form-item :prop="`attrData.${$index}.name`" :rules="fieldsRules.name">
                    <el-input v-model="row.name" placeholder="请输入" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" fixed="left" label="编码" min-width="160" resizable>
                <template v-slot="{ row, $index }">
                  <el-form-item :prop="`attrData.${$index}.code`" :rules="fieldsRules.code">
                    <el-input v-model="row.code" placeholder="请输入" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="描述" min-width="180" resizable>
                <template v-slot="{ row, $index }">
                  <el-form-item :prop="`attrData.${$index}.desc`" :rules="fieldsRules.desc">
                    <el-input v-model="row.desc" placeholder="请输入" />
                  </el-form-item>
                </template>
              </el-table-column>
              <!-- <el-table-column align="center" label="UI组件" min-width="120" resizable>
                <template v-slot="{ row, $index }">
                  <el-form-item :prop="`attrData.${$index}.UiComCode`" :rules="fieldsRules.UiComCode">
                    <el-select v-model="row.UiComCode" placeholder="请选择" @change="(val) => changeUIType(val, row, $index)">
                      <el-option v-for="item in getDictionaryByCode('UIzjlx')" :key="item.value" :label="item.name" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column> -->
              <el-table-column align="center" label="数据类型" resizable>
                <el-table-column align="center" label="类型" min-width="120" resizable>
                  <template v-slot="{ row, $index }">
                    <el-form-item :prop="`attrData.${$index}.dataType`" :rules="fieldsRules.dataType">
                      <el-select
                        v-model="row.dataType"
                        placeholder="请选择"
                        :disabled="!!data.deployed && !!row.id"
                        @change="(val) => changeDataType(val, row, $index)"
                      >
                        <el-option v-for="item in getDictionaryByCode('hjzdlx')" :key="item.value" :label="item.name" :value="item.value" />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="字段长度" min-width="100" resizable>
                  <template v-slot="{ row, $index }">
                    <el-form-item
                      v-if="row.dataType !== 'datetime' || row.dataType !== 'date'"
                      :prop="`attrData.${$index}.attrLength`"
                      :rules="fieldsRules.attrLength"
                    >
                      <el-input v-model.number="row.attrLength" placeholder="请输入" type="number" />
                    </el-form-item>
                  </template>
                </el-table-column>
              </el-table-column>
              <!--              <el-table-column align="center" label="属性字段值" resizable>-->
              <!--                <el-table-column align="center" label="字段值类别" min-width="140" resizable>-->
              <!--                  <template v-slot="{ row, $index }">-->
              <!--                    <el-form-item :prop="`attrData.${$index}.fieldValueType`" :rules="fieldsRules.fieldValueType">-->
              <!--                      <el-select v-model="row.fieldValueType" placeholder="请选择"-->
              <!--                                 @change="(val) => changeFieldValueType(val, row, $index)"-->
              <!--                      >-->
              <!--                        <el-option v-for="item in getDictionaryByCode('zdzlb')" :key="item.value" :label="item.name"-->
              <!--                                   :value="item.value"-->
              <!--                        />-->
              <!--                      </el-select>-->
              <!--                    </el-form-item>-->
              <!--                  </template>-->
              <!--                </el-table-column>-->
              <!--                <el-table-column align="center" label="字段值" min-width="180" resizable>-->
              <!--                  <template v-slot="{ row, $index }">-->
              <!--                    <el-form-item-->
              <!--                      v-if="row.dataType !== 'datetime' && row.fieldValueType !== '1'"-->
              <!--                      :prop="`attrData.${$index}.dimensionId`"-->
              <!--                      :rules="fieldsRules.dimensionId"-->
              <!--                    >-->
              <!--                      <el-input v-model="row.dimensionId" placeholder="请点击选择" readonly-->
              <!--                                @focus="handleSearchDict(row, $index)"-->
              <!--                      >-->
              <!--                        <i slot="suffix" class="el-input__icon el-icon-search" />-->
              <!--                      </el-input>-->
              <!--                    </el-form-item>-->
              <!--                  </template>-->
              <!--                </el-table-column>-->
              <!--              </el-table-column>-->
              <el-table-column align="center" fixed="right" label="操作" width="100">
                <template v-slot="{ row, $index }">
                  <el-dropdown
                    v-if="form.attrData.length > 0"
                    size="mini"
                    split-button
                    @click="handleDelete({ command: 'del', index: $index, row }, data.deployed)"
                    @command="handleCommand"
                  >
                    <i v-if="data.deployed && row.id" class="el-icon-sort" />
                    <i v-else class="el-icon-delete-solid" />
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="{ command: 'up', row, index: $index }" :disabled="$index == 0 ? true : false">
                        上升
                        <i class="el-icon-arrow-up" />
                      </el-dropdown-item>
                      <el-dropdown-item :command="{ command: 'down', row, index: $index }" :disabled="$index == form.attrData.length - 1 ? true : false">
                        下降
                        <i class="el-icon-arrow-down" />
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <!-- <el-button v-else class="el-icon-delete-solid" disabled plain size="mini" /> -->
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <enum-dict-dialog v-model="dialogVisibleEnum" @change="(val) => changeDict(val, 'code')" />
          <multi-dict-dialog v-model="dialogVisibleMulti" @change="(val) => changeDict(val, 'key')" />
        </div>
      </div>
      <!--      </div>-->
      <div class="mt-11 text-c">
        <el-button :loading="loading || tableLoading || uploadLoading" type="primary" @click="onConfirm"> 保存 </el-button>
        <!--        <el-button :loading="loading || tableLoading || uploadLoading" type="primary" @click="handlePublish"> 发布-->
        <!--        </el-button>-->
        <el-button :loading="loading || tableLoading || uploadLoading" plain type="info" @click="visible = false"> 关闭 </el-button>
      </div>
    </div>
  </app-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js';
import utils from '@/hotent-ui-util.js';
import enumDictDialog from './EnumDictDialog.vue';
import multiDictDialog from './MultiDictDialog.vue';
import { getDictionaryByCode } from '@/utils/dictionary.js';
import API from '@/api/business/dataCollectCompany';
import { mapState } from 'vuex';

export default {
  name: 'SourceFieldsManage',
  components: {
    enumDictDialog,
    multiDictDialog,
  },
  mixins: [dialogMixin],
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    var checkey = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('字段编码不能为空'));
      } else {
        if (this.form.attrData.filter((item) => item.code === value).length > 1) {
          callback(new Error('字段编码不能重复!'));
        } else {
          callback();
        }
      }
    };
    return {
      fieldsRules: {
        name: [
          {
            required: true,
            message: '字段名称不能为空',
            trigger: 'blur',
          },
        ],
        code: [
          {
            required: true,
            message: '字段编码不能为空',
            trigger: 'blur',
          },
          {
            pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/,
            message: '以字母开头的字母、数字、下划线组合',
            trigger: ['change', 'blur'],
          },
          { validator: checkey, trigger: 'blur' },
        ],
      },
      form: { attrData: [] },
      importData: { tableId: '' },
      dialogVisibleEnum: false,
      dialogVisibleMulti: false,
      currentRow: null,
      index: null,
      tabelData: null,
      tableLoading: false,
      uploadLoading: false,
      uploadVisible: false,
      loading: false,
    };
  },
  mounted() {
    document.onkeydown = () => {
      if (this.form.attrData) {
        const key = window.event.keyCode;
        if (key == 113) {
          // == 83 && event.ctrlKey
          this.addAttrRows();
          setTimeout(() => {
            this.$refs.attrTableScrollbarHeight.bodyWrapper.scrollTop = this.$refs.attrTableScrollbarHeight.bodyWrapper.scrollHeight;
          }, 500);
        }
      }
    };
  },
  computed: {
    actionUrl: (_) => `${window.context.portal}/biz/dataCollect/clusterField/v1/importFile`,
    ...mapState({
      headers: (state) => ({
        Authorization: `Bearer ${state.login.currentUser.token}`,
      }),
    }),
  },

  beforeDestroy() {},
  methods: {
    initData(data) {
      this.tabelData = data;
      this.importData.tableId = data.id;
      this.getFieldsByTable();
    },
    async getFieldsByTable() {
      this.tableLoading = true;
      try {
        const { fieldList } = await API.getFieldsList(this.data.id);
        // if (fieldList && fieldList.length) {
        // this.form.attrData = fieldList;
        if (fieldList && fieldList.length) {
          this.form.attrData = fieldList.filter((item) => item.fieldType === '2');
          this.form.attrData.sort((a, b) => a.sn - b.sn);
        }
        // }
      } catch (err) {
        this.$message.warning(err || '资源项字段查询失败！');
      } finally {
        this.tableLoading = false;
      }
    },
    getDictionaryByCode,
    changeDict(data, key) {
      // this.currentRow.dimensionId = data.id;
      // this.form.attrData.splice(this.index, 1, data);
      this.currentRow.dimensionId = data[key];
      this.form.attrData.splice(this.index, 1, this.currentRow);
    },
    // 新增字段
    addAttrRows() {
      const last = this.form.attrData[this.form.attrData.length - 1];
      const sn = last && last.sn ? last.sn + 1 : 1;
      const row = {
        tableId: this.tabelData.id,
        code: '',
        name: '',
        desc: '',
        fieldType: '2',
        isInitFiled: 'N',
        isPk: '0',
        isRequired: '0',
        // UiComCode: 'input',
        dataType: 'varchar',
        defaultValue: '',
        format: '',
        fieldValueType: '1',
        dimensionId: '',
        unit: '',
        attrLength: 200,
        decimalLen: 0,
        isEncrypt: '0',
        isEdit: '0',
        isDesensitize: '0',
        index: this.form.attrData.length + 1,
      };
      sn ? (row.sn = sn) : null;
      this.form.attrData.splice(this.form.attrData.length, 0, row);
    },

    changeFieldValueType(val, row, index) {
      row.dimensionId = '';
      row.fieldValueType = val;
      this.form.attrData.splice(index, 1, row);
    },

    // UI类型切换设置默认值
    changeUIType(val, row, index) {
      if (!this.data.deployed && !row.id) {
        row.dataType = 'varchar';
      }
      row.format = '';
      row.fieldValueType = '1';
      if (val === 'date') {
        if (!this.data.deployed && !row.id) {
          row.dataType = 'date'; // 发布后UI和数据类型不关联
        }
        row.format = 'yyyy-MM-dd';
      } else if (val === 'datetime') {
        if (!this.data.deployed && !row.id) {
          row.dataType = 'datetime'; // 发布后UI和数据类型不关联
        }
        row.format = 'yyyy-MM-dd HH:mm:ss';
      } else if (val === 'select' || val === 'checkbox' || val === 'radio') {
        row.fieldValueType = '2';
      }
      this.form.attrData.splice(index, 1, row);
    },

    // 数据类型切换设置默认值
    changeDataType(val, row, index) {
      row.attrLength = 0;
      row.decimalLen = 0;
      row.format = '';
      row.fieldValueType = '1';
      row.dimensionId = '';
      if (val === 'datetime') {
        row.format = 'yyyy-MM-dd HH:mm:ss';
      } else if (val === 'date') {
        row.format = 'yyyy-MM-dd';
      } else if (val === 'varchar') {
        row.attrLength = 200;
      } else if (val === 'number') {
        row.attrLength = 10;
        row.decimalLen = 2;
      }
      this.form.attrData.splice(index, 1, row);
    },

    // 选择字典
    handleSearchDict(row, $index) {
      this.currentRow = row;
      this.index = $index;
      if (row.fieldValueType === '2') {
        this.dialogVisibleEnum = true;
      } else if (row.fieldValueType === '3') {
        this.dialogVisibleMulti = true;
      }
    },

    handleDelete(param, deployed) {
      if (deployed && param.row.id) return;
      this.handleCommand(param);
    },

    handleCommand(param) {
      switch (param.command) {
        case 'del':
          this.deleteAttrRows(param.row, param.index);
          break;
        case 'up':
          this.attrUp(param.row, param.index);
          break;
        case 'down':
          this.attrDown(param.row, param.index);
          break;
        default:
          break;
      }
    },

    // 删除字段 伪删除 设置字段 status 值 hide
    isDel(row, index) {},
    // 删除字段
    deleteAttrRows(row, index) {
      if (row.isInitFiled === 'Y') {
        this.$message.warning('该字段为初始字段，不可删除！');
        return;
      }
      this.form.attrData.splice(index, 1);

      // if (!row.id) {
      //   this.form.attrData.splice(index, 1);
      //   return;
      // }

      // this.$confirm(`是否删除字段（${row.name}）?`, '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning',
      // }).then(async () => {
      //   await API.delFields(row.id);
      //   this.$message.success('删除成功');
      //   this.form.attrData.splice(index, 1);
      // }).catch(() => {
      // });
    },
    attrUp(row, index) {
      this.form.attrData[index].index = this.form.attrData[index].index - 1;
      this.form.attrData[index].sn = this.form.attrData[index - 1].sn;
      this.form.attrData[index - 1].index = this.form.attrData[index - 1].index + 1;
      this.form.attrData[index - 1].sn = this.form.attrData[index - 1].sn + 1;
      this.form.attrData = utils.arrayMove(this.form.attrData, row, 'up');
    },
    attrDown(row, index) {
      this.form.attrData[index].index = this.form.attrData[index].index + 1;
      this.form.attrData[index].sn = this.form.attrData[index].sn + 1;
      this.form.attrData[index + 1].index = this.form.attrData[index + 1].index - 1;
      this.form.attrData[index + 1].sn = this.form.attrData[index].sn - 1;
      this.form.attrData = utils.arrayMove(this.form.attrData, row, 'down');
    },

    onCancel() {
      this.visible = false;
      this.form.attrData = [];
    },
    onConfirm() {
      this.$refs.form.validate(async (valid, object) => {
        if (valid) {
          this.loading = true;
          const params = {
            fieldList: this.form.attrData,
            table: this.data,
          };

          try {
            if (this.data.deployed) {
              await API.saveOrUpdateFields(params.fieldList);
            } else {
              await API.saveFields(params);
            }
            this.$message.success('字段保存成功');
            this.visible = false;
            this.$emit('confirm');
          } catch (err) {
            this.$message.warning(err || '操作失败');
          } finally {
            this.loading = false;
          }
        } else {
          this.$message.warning(`有${Object.keys(object).length}个字段未通过校验，请正确填写表单。`);
          this.loading = false;
        }
      });
    },
    download() {
      const fileName = '数据提供方-数据字段清单.xlsx';
      // const file = `./file/download/${fileName}`;
      const file = window.context.download + fileName;
      const a = document.createElement('a');
      a.href = file;
      a.download = fileName; // 设置下载文件文件名
      a.style.display = 'none';
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    //  导入文件上传前
    beforeUpload(file) {
      this.uploadVisible = false;
      return new Promise((resolve, reject) => {
        this.uploadLoading = true;
        const { size, name } = file;
        this.$confirm(`请确认是否导入 “${name}” ？`, '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then((_) => {
            let passedOrNot = true; // 是否通过验证
            const typeRegular = /\.(xls|xlsx)$/i;
            const verification = [
              {
                condition: !typeRegular.test(name),
                result: () => this.$message.error('只能上传xls或xlsx文件类型'),
              },
            ];
            verification.forEach((item) => {
              if (item.condition) {
                item.result();
                passedOrNot = false;
                this.uploadLoading = false;
              }
            });

            passedOrNot ? resolve() : reject();
          })
          .catch((_) => {
            reject();
            this.uploadLoading = false;
            this.$message.warning('已取消上传');
          });
      });
    },

    // 导入文件上传成功
    async handleSuccess(res) {
      if (res.state) {
        this.$message.success('导入成功');
        this.uploadLoading = false;
        await this.getFieldsByTable();
      } else {
        this.$message.error(res.message);
      }
    },

    // 导入文件上传失败
    handleError() {
      this.$message.error('导入失败，请重试');
      this.uploadLoading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

::v-deep {
  .app-dialog-content {
    display: flex;
    flex-direction: column;
  }
}

.left-header {
  border-bottom: 1px solid #e9e9e9;
  background: #fafafa;
  //border-bottom: 1px solid #e9e9e9;
  //border-top-left-radius: 0.26042vw;
  //border-top-right-radius: 0.26042vw;
  color: $--color-primary;
}

.left-cont {
  .item {
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 10px;

    .label {
      position: relative;
      padding-left: 20px;

      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        /* prettier-ignore */
        width: 10PX;
        /* prettier-ignore */
        height: 10PX;
        border-radius: 100%;
        background: $--color-primary;
      }
    }

    .cont {
      padding-left: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.table__body_wrapper {
  flex: 1;
  height: calc(100% - 45px);
}

::v-deep .el-table td.el-table__cell {
  padding: 0;
}

::v-deep .el-form-item {
  margin: 18px 0;
}
</style>
