<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;" class="NCC-dialog-content" v-loading="loading">
      <el-tabs class="system-info-tabs" type="border-card" tab-position='top' v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="应用信息" name="1">
          <div class="system-info" style="overflow:auto;height: calc(65vh - 65px); margin-bottom: -10px;">
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">运营主体/个人:</div>
                    <p class="text">{{ dataForm.companyName || '--' }}</p>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">应用类型:</div>
                    <p class="text">{{ dataForm.systemType | dynamicTextUP(systemTypeOptions) }}</p>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">应用名称:</div>
                    <p class="text">{{ dataForm.systemName || "--" }}</p>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">应用分类:</div>
                    <p class="text">{{ dataForm.systemClass | dynamicTextClassName(systemClassOptions) }}</p>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">备案号:</div>
                    <p class="text">{{ dataForm.systemRecordNumber || "--" }}</p>
                </div>
            </el-col>
            <template
              v-if="
                dataForm.systemType &&
                dataForm.systemType != '580634746028033285'
              "
            >
              <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">特殊备案类型:</div>
                    <p class="text">{{ dataForm.specialRecordType || "--" }}</p>
                </div>
              </el-col>
              <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">特殊备案内容:</div>
                    <p class="text">{{ dataForm.specialRecordContent || "--" }}</p>
                </div>
              </el-col>
              <el-col :span="24" v-if="dataForm.systemType == '576280043370579205'">
                <div class="form-item">
                    <div class="label w-120">域名:</div>
                    <p class="text">{{ dataForm.domain || "--" }}</p>
                </div>
              </el-col>
              <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">特殊备案号:</div>
                    <p class="text">{{ dataForm.specialRecordNumber || "--" }}</p>
                </div>
              </el-col>
              <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">特殊备案时间:</div>
                    <p class="text">{{ ncc.dateFormat(dataForm.specialRecordTime, 'YYYY-MM-DD HH:mm:ss') || "--" }}</p>
                </div>
              </el-col>
            </template>
            <el-col :span="24" v-if="dataForm.systemType == '576280004254500101'">
              <div class="form-item">
                  <div class="label w-120">安装次数:</div>
                  <p class="text">{{ dataForm.systemDownloadVolume || "--" }}<span class="start-span">更新时间：{{ ncc.dateFormat(dataForm.lastModifyTime) || ncc.dateFormat(dataForm.creatorTime) }}</span></p>
              </div>
            </el-col>
            <el-col :span="24" v-if="dataForm.systemType == '576280043370579205' || dataForm.systemType == '576280085330396421'">
              <div class="form-item">
                  <div class="label w-120">月活:</div>
                  <p class="text">{{ dataForm.MAU || "--" }}<span class="start-span">更新时间：{{ ncc.dateFormat(dataForm.lastModifyTime) || ncc.dateFormat(dataForm.creatorTime) }}</span></p>
              </div>
            </el-col>
            <el-col :span="24" v-if="dataForm.systemType == '580634746028033285'">
              <div class="form-item">
                  <div class="label w-120">粉丝量:</div>
                  <p class="text">{{ dataForm.followerCount || "--" }}<span class="start-span">更新时间：{{ ncc.dateFormat(dataForm.lastModifyTime) || ncc.dateFormat(dataForm.creatorTime) }}</span></p>
              </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">备案许可证:</div>
                    <p class="text">{{ dataForm.recordLicense || "--" }}</p>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">归属平台:</div>
                    <p class="text">{{ dataForm.platform || "--" }}</p>
                </div>
            </el-col>
            
            <!-- <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">下载量:</div>
                    <p class="text">{{ dataForm.systemDownloadVolume || "--" }}</p>
                </div>
            </el-col> -->
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">版本:</div>
                    <p class="text">{{ dataForm.version || "--" }}</p>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">负责人姓名:</div>
                    {{ dataForm.principalName || "--" }}
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">负责人电话:</div>
                    {{ dataForm.principalPhone || "--" }}
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">办公地址:</div>
                    <p class="text">{{ dataForm.officeAddress || "--" }}</p>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">应用图标:</div>
                    <img v-if="dataForm.systemIconModel" class="avatar" :src="define.comUrl + dataForm.systemIconModel.url">
                    <span v-else>无</span>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">所属区域:</div>
                    <p class="text">{{ dataForm.areaId | dynamicText(areaOptions) }}</p>
                </div>
            </el-col>
            <!-- <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">所属外协:</div>
                    <p class="text">{{ dataForm.externalAssistanceId ? '外协一' : "--" }}</p>
                </div>
            </el-col> -->
          </div>
        </el-tab-pane>
        <el-tab-pane label="运营主体信息" name="2">
          <div class="company-info">
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">运营主体/个人名称:</div>
                    <p class="text">{{ companyForm.companyName || "--" }}</p>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                  <div class="label w-120">社会信用代码:</div>
                  <p class="text">{{ companyForm.socialCreditAgency || "--" }}</p>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">运营主体法人:</div>
                    <p class="text">{{ companyForm.legalPerson || "--" }}</p>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">运营主体地址:</div>
                    <p class="text">{{ companyForm.address || "--" }}</p>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">资质证明:</div>
                  <div class="text" style="width: calc(120% - 120px);">
                    <NCC-UploadFz v-model="companyForm.qualificationCertificate" :fileSize="5" sizeUnit="MB" :limit="9" buttonText="点击上传" disabled/>
                  </div>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">联系人:</div>
                    <p class="text">{{ companyForm.contactUser || "--" }}</p>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">联系电话:</div>
                    <p class="text">{{ companyForm.contactPhone || "--" }}</p>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">所属区县:</div>
                    <p class="text">{{ companyForm.areaName || "--" }}</p>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="form-item">
                    <div class="label w-120">其他信息:</div>
                    <div v-html="companyForm.otherInfo"></div>
                </div>
            </el-col>
          </div>
        </el-tab-pane>
        <el-tab-pane label="核查处置记录" name="3">
          <el-table :data="inspectionList" height="500" border style="width: 100%">
            <el-table-column show-overflow-tooltip prop="platformNameStr" label="应用名称"></el-table-column>
            <el-table-column show-overflow-tooltip prop="companyStr" label="运营主体"></el-table-column>
            <el-table-column show-overflow-tooltip label="问题类型" prop="questionType" align="left" />
            <el-table-column show-overflow-tooltip prop="questionClass" label="关键词"></el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
              <template slot-scope="scope">
                <el-button type="text" @click="addOrUpdateHandle(scope.row, true)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="网信执法记录" name="4">
          <el-table :data="handingList" height="500" border style="width: 100%">
            <el-table-column show-overflow-tooltip prop="number" label="档案号"></el-table-column>
            <el-table-column show-overflow-tooltip prop="registrationTime" label="登记时间" :formatter="ncc.tableDateFormat"></el-table-column>
            <el-table-column show-overflow-tooltip prop="systemNameStr" label="应用名称"></el-table-column>
            <el-table-column show-overflow-tooltip prop="registeredEntityStr" label="运营主体"></el-table-column>
            <el-table-column show-overflow-tooltip prop="illegalReasons" label="违法原因"></el-table-column>
            <el-table-column show-overflow-tooltip prop="punishmentRequirements" label="处罚要求"></el-table-column>
            <el-table-column show-overflow-tooltip prop="punishmentContent" label="处罚内容"></el-table-column>
            <el-table-column label="状态" prop="state" align="left" >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.state" :type="ncc.getStateTagType(scope.row.state, stateOptions)">{{ scope.row.state | dynamicTextUP(stateOptions) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
              <template slot-scope="scope">
                <el-button type="text" @click="addOrUpdateHandle(scope.row, true)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="数据日志" name="5">
          <div class="infinite-list-wrapper" style="overflow:auto;height: calc(65vh - 65px); margin-bottom: -10px;">
            <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>
      <!-- 案件处理 -->
    <HandForm v-if="HandFormVisible" ref="HandForm" @refresh="(val) => {taskRefresh('HandFormVisible', val)}" />
    <ReportForm v-if="ReportFormVisible" ref="ReportForm" @refresh="(val) => {taskRefresh('ReportFormVisible', val)}" />
    <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";
import HandForm from '@/views/baseCaseHandling/Form.vue' // 案件处理
import ReportForm from '@/views/baseInspectionReport/Form.vue' // 案件处理
export default {
  components: {HandForm, ReportForm},
  props: ['areaOptions'],
  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: [],
        systemIconModel: '',
      },
      systemTypeOptions: [],
      systemClassOptions: [],

      // 公司信息
      companyForm: {},
      // 网信执法记录
      handingList: [],

      // 核查处置记录
      inspectionList: [],

      // 数据日志
      record_loading: false,
      queryList: {
        pageIndex: 1,
        pageSize: 10,
      },
      updataRecordList: [],
      record_total: '',
			questionTypeOptions : [],
      stateOptions: [],
      HandFormVisible: false,
      ReportFormVisible: false,
    };
  },
  computed: {
    record_noMore() {
      return this.updataRecordList.length >= this.record_total;
    },
    record_disabled () {
      return this.record_loading || this.record_noMore;
    }
  },
  watch: {},
  created() {
    this.initStateTypeOption();
    this.initSystemTypeList();
  },
  mounted() {},
  methods: {
    async initStateTypeOption() {
      let list = this.$store.state.meta.stateTypeList;
      !list && (list = await this.$store.dispatch('getTypeListByCode', 'stateType'));
      this.stateOptions = list;
    },
    init(row) {
      this.visible = true;
      this.dataForm.id = row.id;
      this.activeName = '1'
      this.$nextTick(() => {
        this.initSystemForm(this.dataForm.id, row.companyName)
      });
    },
    handleClick(e) {
        switch (e.index) {
            case '1':
                // 公司信息
                this.initCompanyForm();
                break;
            case '2':
                // 核查处置记录
                this.initInspectionList(this.dataForm.id);
                break;
            case '3':
                // 网信执法记录
                this.initHandingList(this.dataForm.id);
                break;
            case '4':
                // 数据日志
                this.updataRecordList = [];
                this.queryList = {
                  pageIndex: 1,
                  pageSize: 10,
                };
                this.initInfoRecord();
                break;
            default:
                break;
        }
    },

    // 初始化应用信息-----------------------------------------------------------------------------0
    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;
    },

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

    // 核查处置记录------------------------------------------------------------------------------2
    initHandingList(id) {
      this.loading = true;
      request({
        url: `/Extend/basesysteminfo/GetHandlingList/${id}`,
        method: "get",
      }).then((res) => {
        this.loading = false;
        this.handingList = res.data;
      }).catch(() => this.loading = false);
    },

    // 网信执法记录--------------------------------------------------------------------------------3
    initInspectionList(id) {
      this.loading = true;
      request({
        url: `/Extend/basesysteminfo/GetInspectionList/${id}`,
        method: "get",
      }).then((res) => {
        this.loading = false;
        this.inspectionList = res.data;
      }).catch(() => this.loading = false);
    },
    // 数据日志-----------------------------------------------------------------------------------4
    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;
      });
    },

    addOrUpdateHandle(row) {
      switch (this.activeName) {
        case "3":
        this.ReportFormVisible = true;
          this.$nextTick(() => {
            this.$refs.ReportForm.init(row.id, true);
          });
          break;
        case "4":
          this.HandFormVisible = true;
          this.$nextTick(() => {
            this.$refs.HandForm.init(row.id, true);
          });
          break;
      
        default:
          break;
      }
    },

    taskRefresh(key ,isrRefresh) {
      this[`${key}`] = false;
      if (isrRefresh) this.reset();
    },
  
    goBack() {
      this.$emit("refresh");
    },
    
  },
};
</script>
<style lang="scss" scoped>
.system-info-tabs {
  width: 100%;
  height: 100%;
  border-radius: 15px;
}
.el-dialog__wrapper.NCC-dialog.NCC-dialog_center.systemInfoDialog {
  :deep(.el-tabs__content) {
    //background: #f5f5f5;
    //border-radius: 10px;
    padding: 10px;
    margin: 10px;
  }
}

// .NCC-dialog.systemInfoDialog {
//   :deep(.el-dialog__body) {
//     overflow: unset !important;
//     :deep(.el-tabs__content) {
//       height: calc(65vh - 45px);
//     }
//   }
// }
.avatar {
  width: 100px;
  height: 100px;
  display: block;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  margin-left: 10px;
}
.start-span {
  margin-left: 10px;
  color: red;
  font-size: 12px;
  line-height: 30px;
}
</style>
