<template>
  <div id="info">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-col :span="24" class="top">
            <el-button type="primary" size="mini" @click="back">返回</el-button>
          </el-col>
          <el-col :span="24" class="down">
            <el-col :span="24" class="text">
              <el-col :span="2" class="left"> 企业名称：</el-col>
              <el-col :span="22" class="right">
                {{ data.name }}
              </el-col>
            </el-col>
            <el-col :span="24" class="text">
              <el-col :span="2" class="left"> 申领时间：</el-col>
              <el-col :span="22" class="right">
                {{ getDate(data.meta) }}
              </el-col>
            </el-col>
            <el-col :span="24" class="text">
              <el-col :span="2" class="left"> 资质资料：</el-col>
              <el-col :span="20" class="right">
                <el-col :span="4" v-for="(i, index) in data.material" :key="`material-${index}`">
                  <img v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)" />
                  <el-link v-else :key="`material-${index}`" type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="text">
              <el-col :span="2" class="left"> 审核资料：</el-col>
              <el-col :span="20" class="right">
                <el-col :span="4" v-for="(i, index) in data.medium_material" :key="`medium_material-${index}`">
                  <img v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)" />
                  <el-link v-else type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="text">
              <el-col :span="2" class="left"> 合同资料：</el-col>
              <el-col :span="20" class="right">
                <el-col :span="4" v-for="(i, index) in data.contract" :key="`contract-${index}`">
                  <img v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)" />
                  <el-link v-else type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="text">
              <el-col :span="2" class="left"> 审核状态：</el-col>
              <el-col :span="22" class="right">
                {{ getStatus(data.status) }}
              </el-col>
            </el-col>
            <el-col :span="24" class="text">
              <el-col :span="24" class="left"> 审核意见：</el-col>
              <el-col :span="24" class="right desc">
                <el-timeline>
                  <el-timeline-item v-for="(item, index) in descList" :key="index" :timestamp="item.create_time" placement="top">
                    <el-card>
                      <p>{{ item.desc }}</p>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const moment = require('moment');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: ticket } = createNamespacedHelpers('ticket');

export default {
  name: 'info',
  props: {},
  components: {},
  data: function () {
    return {
      data: {},
      imgList: ['jpg', 'jpeg', 'png', 'bmp', 'gif'],
      // 意见列表
      descList: [],
    };
  },
  async created() {
    if (this.id) await this.search();
  },
  methods: {
    ...ticket(['fetch', 'record']),
    async search() {
      let res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        this.$set(this, `data`, res.data);
      }
      res = await this.record({ ticket_id: this.id, status: this.status });
      if (this.$checkRes(res)) {
        this.$set(this, `descList`, res.data);
      }
    },
    // 返回
    back() {
      this.$router.push({ path: '/adminCenter/company/ticket' });
    },
    getDate(date) {
      if (date) {
        let newDate = moment(date.createdAt).format('YYYY-MM-DD');
        if (newDate) return newDate;
      }
    },
    toOpen(url) {
      window.open(url);
    },
    isImg(url) {
      const arr = url.split('.');
      const suffix = _.last(arr);
      return this.imgList.includes(suffix);
    },
    getStatus(i) {
      if (i == '0') return '资质审查中';
      else if (i == '1') return '企业准备订单';
      else if (i == '-1') return '资质审查失败';
      else if (i == '2') return '信息资料审查中';
      else if (i == '3') return '企业订单入库';
      else if (i == '-3') return '信息资料审查失败';
      else if (i == '4') return '创新券领取成功';
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    status() {
      return this.$route.query.status;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  border-radius: 10px;
  box-shadow: 0 0 5px #cccccc;
  padding: 20px;
  .one {
    .top {
      text-align: right;
      margin: 0 0 15px 0;
    }
    .down {
      .text {
        padding: 10px 0;
        border-bottom: 1px dashed #333;
        .left {
          text-align: left;
        }
        .right {
          img {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
          }
        }
        .desc {
          margin: 10px 0 0 0;
        }
      }
    }
  }
}
.main:hover {
  box-shadow: 0 0 5px #409eff;
}
</style>
