<template>
  <el-dialog
    title="详情"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="NCC-dialog NCC-dialog_center systemInfoDialog"
    lock-scroll
    width="70%"
  >
    <el-row :gutter="15" style="height: 65vh" v-loading="loading">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="应用信息" name="1">
          <div class="system-info">
            <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">主体企业:</div>
                    {{ dataForm.companyName || "--" }}
                </div>
            </el-col>
            <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">系统类型:</div>
                    {{ dataForm.systemType | dynamicTextUP(systemTypeOptions) }}
                </div>
            </el-col>
            <template
              v-if="
                dataForm.systemType &&
                dataForm.systemType != '580634746028033285'
              "
            >
              <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">特殊备案类型:</div>
                    {{ dataForm.systemType || "--" }}
                </div>
              </el-col>
              <el-col :span="24">
                <div class="form-item">
                    <div class="label w-100">特殊备案内容:</div>
                    {{ dataForm.systemType || "--" }}
                </div>
              </el-col>
              <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">特殊备案号:</div>
                    {{ dataForm.systemType || "--" }}
                </div>
              </el-col>
              <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">特殊备案时间:</div>
                    {{ dataForm.systemType || "--" }}
                </div>
              </el-col>
            </template>
            <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">系统名称:</div>
                    {{ dataForm.systemName || "--" }}
                </div>
            </el-col>
            <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">系统分类:</div>
                    {{ dataForm.systemClass | dynamicTextClassName(systemClassOptions) }}
                </div>
            </el-col>
            <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">备案许可证:</div>
                    {{ dataForm.recordLicense || "--" }}
                </div>
            </el-col>
            <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">归属平台:</div>
                    {{ dataForm.platform || "--" }}
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-100">域名:</div>
                    {{ dataForm.domain || "--" }}
                </div>
            </el-col>
            <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">下载量:</div>
                    {{ dataForm.systemDownloadVolume || "--" }}
                </div>
            </el-col>
            <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">版本:</div>
                    {{ dataForm.version || "--" }}
                </div>
            </el-col>
            <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">负责人姓名:</div>
                    {{ dataForm.principalName || "--" }}
                </div>
            </el-col>
            <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">负责人电话:</div>
                    {{ dataForm.principalPhone || "--" }}
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-100">办公地址:</div>
                    {{ dataForm.officeAddress || "--" }}
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-100">系统图标:</div>
                    {{ dataForm.systemIcon || "--" }}
                </div>
            </el-col>
          </div>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="2">
          <div class="company-info">
            <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">公司名称:</div>
                    {{ companyForm.companyName || "--" }}
                </div>
            </el-col>
            <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">社会信用代:</div>
                    {{ companyForm.socialCreditAgency || "--" }}
                </div>
            </el-col>
            <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">公司法人:</div>
                    {{ companyForm.legalPerson || "--" }}
                </div>
            </el-col>
            <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">公司地址:</div>
                    {{ companyForm.address || "--" }}
                </div>
            </el-col>
            <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">联系人:</div>
                    {{ companyForm.contactUser || "--" }}
                </div>
            </el-col>
            <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">联系方式:</div>
                    {{ companyForm.contactPhone || "--" }}
                </div>
            </el-col>
            <el-col :span="12">
                <div class="form-item">
                    <div class="label w-100">所属区县:</div>
                    {{ companyForm.areaName || "--" }}
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-100">其他信息:</div>
                    <div v-html="companyForm.otherInfo"></div>
                </div>
            </el-col>
          </div>
        </el-tab-pane>
        <el-tab-pane label="核查处置记录" name="3">核查处置记录</el-tab-pane>
        <el-tab-pane label="网信执法记录" name="4">网信执法记录</el-tab-pane>
        <el-tab-pane label="数据日志" name="5">
          <div class="infinite-list-wrapper" style="overflow:auto;height: calc(65vh - 45px);">
            <el-timeline class="list" v-infinite-scroll="initInfoRecord" :infinite-scroll-disabled="record_disabled">
              <el-timeline-item
                  placement="top"
                  v-for="(v, i) in updataRecordList"
                  :key="i"
                >
                  <el-card>
                    <h4 v-if="v.content">
                      <!-- <p v-for="(item, index) in v.updataList" :key="index">
                        将“{{ item.PropertyName }}”从“{{
                          item.OldValue
                        }}”改为“{{ item.NewValue }}”
                      </p> -->
                      <p v-for="(item, index) in v.changeRecord" :key="index">{{ item }}</p>
                    </h4>
                    <h4 v-else>
                      <p>{{ v.describe }}</p>
                    </h4>
                    <p>{{ v.creatorUserId }} 提交于 {{ v.updataTime }}</p>
                  </el-card>
              </el-timeline-item>
            </el-timeline>
            <p v-if="record_loading">加载中...</p>
            <p v-if="updataRecordList.length && record_noMore">没有更多了</p>
            <el-empty v-if="!updataRecordList.length && !record_loading" description="暂无数据"></el-empty>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import { getSystemDetail, getUpdataRecord } from "@/api/baseData/info";
import { getCompanyInfoById } from "@/api/baseData/company";
export default {
  components: {},
  props: [],
  data() {
    return {
      loading: false,
      visible: false,

      activeName: "1",

      // 应用信息
      dataForm: {
        id: undefined,
        questionFrom: undefined,
        platformName: undefined,
        platformType: undefined,
        questionType: undefined,
        questionClass: undefined,
        questionContent: undefined,
        link: undefined,
        obtainEvidence: [],
        annex: [],
      },
      systemTypeOptions: [],
      systemClassOptions: [],

      // 公司信息
      companyForm: {},

      // 数据日志
      record_loading: false,
      queryList: {
        pageIndex: 1,
        pageSize: 10,
      },
      updataRecordList: [],
      record_total: ''
    };
  },
  computed: {
    record_noMore() {
      return this.updataRecordList.length >= this.record_total;
    },
    record_disabled () {
      return this.record_loading || this.record_noMore;
    }
  },
  watch: {},
  created() {
    this.initSystemTypeList();
  },
  mounted() {},
  methods: {
    init(row) {
      this.visible = true;
      this.dataForm.id = row.Id;
      this.activeName = '1'
      this.$nextTick(() => {
        this.initSystemForm(this.dataForm.id, row.companyName)
      });
    },
    handleClick(e) {
      console.log(e);
      
        switch (e.index) {
            case '1':
                // 公司信息
                this.initCompanyForm();
                
                break;
            case '4':
                this.updataRecordList = [];
                this.queryList = {
                  pageIndex: 1,
                  pageSize: 10,
                };
                // 数据日志
                this.initInfoRecord();
                break;
        
            default:
                break;
        }
        
    },

    // 初始化应用信息
    async initSystemForm(id, companyName) {
        this.loading = true;
        let { data } = await getSystemDetail(id);
        await this.initSystemClassList(data.systemType);
        this.dataForm = data;
        this.dataForm.companyName = companyName;
        this.loading = false;
    },
    async initSystemTypeList() {
      let list = this.$store.state.meta.system;
      !list &&
        (list = await this.$store.dispatch("getTypeListByCode", "system"));
      this.systemTypeOptions = list;
    },

    async initSystemClassList(val) {
        let list = this.$store.state.meta.systemClass[val];
        !list && (list = await this.$store.dispatch('getSystemType', val));
        this.systemClassOptions = list;
    },

    // 初始化公司信息
    async initCompanyForm() {
      this.loading = true;
      let res = await getCompanyInfoById(this.dataForm.companyId);
      this.companyForm = res.data;
      this.loading = false;
    },

    // 数据日志
    async initInfoRecord() {
      this.record_loading = true;
      await getUpdataRecord({
        id: this.dataForm.id,
        ...this.queryList,
      }).then(({ data }) => {
        data.list.forEach((item) => {
          let date = new Date(item.creatorTime * 1000);
          item.updataTime = this.$m(date).format("YYYY-MM-DD HH:mm:ss");
          item.updataList = JSON.parse(item.content);
          item.changeRecord = item.content ? JSON.parse(item.describe) : item.describe;
        });
        this.record_total = data.pagination.total
        this.updataRecordList = [...this.updataRecordList, ...data.list];
        this.record_loading = false;
        this.queryList.pageIndex += 1;
      });
    },
  
    goBack() {
      this.$emit("refresh");
    },
    
  },
};
</script>
<style lang="scss" scoped>
.NCC-dialog.systemInfoDialog {
  :deep(.el-dialog__body) {
    overflow: unset !important;
    :deep(.el-tabs__content) {
      height: calc(65vh - 45px);
    }
  }
}
</style>
