<template>
  <app-dialog v-model="visible" :loading="loading" :title="title" append-to-body class="detail-dialog" @cancel="onCancel" width="60%" :hideFooter="true">
    <el-form ref="form" :model="form" label-width="120px">
      <el-divider content-position="left"><i class="el-icon-document" style="color: rgb(24, 144, 255)" /><span class="divider-top">基础信息</span></el-divider>
      <el-descriptions :column="3" border labelClassName="label-w">
        <el-descriptions-item label="资源项名称">{{ form.name || '-' }}</el-descriptions-item>
        <el-descriptions-item label="资源项编码">{{ form.code || '-' }}</el-descriptions-item>
        <el-descriptions-item label="数据表名">{{ form.tableName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="DS项目名称">{{ form.dsProjectName || '-' }} </el-descriptions-item>
        <el-descriptions-item label="DS任务名称">{{ form.dsTasknodeName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="DS工作流名称">{{ form.dsWorkflowName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="日志创建时间">{{ form.createTime || '-' }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left"><i class="el-icon-document" style="color: rgb(24, 144, 255)" /><span class="divider-top">治理详情</span></el-divider>
      <el-descriptions :column="3" border labelClassName="label-w">
        <el-descriptions-item label="治理状态">{{ dictEscape(dictCleanStatus, form.cleanStatus) || '-' }} </el-descriptions-item>
        <el-descriptions-item label="治理方式">{{ dictEscape(dictCleanType, form.cleanType) || '-' }}</el-descriptions-item>
        <el-descriptions-item label="计算方式">{{ dictEscape(dictType, form.type) || '-' }}</el-descriptions-item>
        <el-descriptions-item label="治理时间" :span="2">{{ form.startTime || '-' }} 至 {{ form.endTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="增量的开始时间">{{ form.incrementDatetime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="总数据量">{{ form.changeNum || '-' }}</el-descriptions-item>
        <el-descriptions-item label="新增数据量">{{ form.addNum || '-' }}</el-descriptions-item>
        <el-descriptions-item label="删除数据量">{{ form.delNum || '-' }}</el-descriptions-item>
        <el-descriptions-item label="修改数据量">{{ form.updateNum || '-' }}</el-descriptions-item>
        <el-descriptions-item label="剩余总数量">{{ form.totalNum || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-form>
  </app-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js';
export default {
  name: 'detailDialog',
  mixins: [dialogMixin],
  props: {},
  data() {
    return {
      form: {},
      loading: false,
      dictCleanStatus: [
        {
          name: '成功',
          value: '1',
        },
        {
          name: '失败',
          value: '0',
        },
      ],
      dictCleanType: [
        {
          name: 'DS任务',
          value: '1',
        },
        {
          name: '离线文件导入',
          value: '2',
        },
      ],
      dictType: [
        {
          name: '全量计算',
          value: '1',
        },
        {
          name: '增量计算',
          value: '2',
        },
      ],
    };
  },
  mounted() {},
  methods: {
    dictEscape(dictKey, value) {
      const item =
        dictKey.find((i) => {
          const dictionaryValue = i.value; // 字典值
          let condition = dictionaryValue === value; // 返回条件
          return condition;
        }) || {};
      return item.name || '';
    },
    /**
     * @description: dialog每次显示时触发的init方法
     * @param {*} data 传入data
     * @return {*}
     */
    initData(data) {
      const orgForm = this.$options.data().form;
      this.form = { ...orgForm, ...data };
    },

    onCancel() {
      this.visible = false;
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions-row .label-w {
  width: 120px;
  background-color: #f7faff;
}
::v-deep .el-descriptions-row .label-w2 {
  width: 160px;
  background-color: #f7faff;
}
</style>
