<template>
  <div class="app-container">
    <div class="title">
      <el-button class="backBtn" type="primary" size="mini" @click="backFn">返回</el-button>
    </div>
    <el-form :model="detailForm" ref="detailForm" size="mini" :inline="true"  label-width="110px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="公司:">
            <span>{{detailForm.deptOne}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="大区:">
            <span>{{detailForm.deptTwo}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="销售部:">
            <span>{{detailForm.deptThree}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="接收门店名称:">
            <span>{{detailForm.receiveShopName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="接收门店编码:">
            <span>{{detailForm.receiveShopCode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发放人:">
            <span>{{detailForm.issuer}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发放人编码:">
            <span>{{detailForm.issuerCode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物料名称:" >
            <span>{{detailForm.publicityName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物料类型:">
            <span>{{detailForm.publicityType}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发放数量:">
            <span>{{detailForm.extend}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物品发放时间:">
            <span>{{detailForm.issuingTime}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物品目前状态:">
            <span>{{statusFormat(detailForm)}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="签收导购名称:">
            <span>{{detailForm.signGuidename}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="签收导购编码:">
            <span>{{detailForm.signGuidecode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="签收时间:">
            <span>{{detailForm.signTime}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="title">
      物料图片
    </div>
    <el-row class="mt10" :gutter="20">
      <el-col :span="6" v-for="(item,index) in imgList" :key="index" v-if="imgList.length>0">
        <el-image
          style="width: 100%;"
          :src="item.path"
          :preview-src-list="previewsrcList">
        </el-image>
      </el-col>
      <el-col :span="24" v-if="imgList.length==0 || imgList==null">
        <el-empty description="暂无图片"></el-empty>
      </el-col>
    </el-row>
    <div class="title">
      签收图片
    </div>
    <el-row class="mt10" :gutter="20">
      <el-col :span="6" v-for="(item,index) in imgListSign" :key="index" v-if="imgListSign.length>0">
        <el-image
          style="width: 100%;"
          :src="item.path"
          :preview-src-list="previewsrcListSign">
        </el-image>
      </el-col>
      <el-col :span="24" v-if="imgListSign.length == 0 || imgListSign==null">
        <el-empty description="暂无图片"></el-empty>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    import { issuerStoreDetail } from "@/api/guide/sign";

    export default {
        name: "SignDetail",
        data() {
            return {
                loading:true,
                detailForm:{},
                statusOptions:[],
                imgList:[],
                previewsrcList:[],
                imgListSign:[],
                previewsrcListSign:[],
            };
        },
        created() {
            this.getDicts("guide_sign_status").then(response => {
                this.statusOptions = response.data;
            });
            this.getDetailData();
        },
        methods: {
            getDetailData(){
                let query = this.$route.query;
                this.imgList=[];
                this.previewsrcList=[];
                this.imgListSign=[];
                this.previewsrcListSign=[];
                issuerStoreDetail({id:query.id}).then(response => {
                    console.log(response)
                    this.detailForm = response.data.signinfo;
                    this.imgList = response.data.grantimginfo;
                    this.previewsrcList = this.previewsrcFn(response.data.grantimginfo);
                    this.imgListSign = response.data.signimginfo;
                    this.previewsrcListSign = this.previewsrcFn(response.data.signimginfo);
                });
            },
            previewsrcFn(arr){
                return arr.map(item => item.path);
            },
            backFn(){
                let query = this.$route.query;
                if(query.from == 'signreport'){
                    this.$router.push({path:'/guide/signreport'});
                }else{
                    this.$router.push({path:'/material/sign',query:query});
                }
            },
            statusFormat(row){
                return this.selectDictLabel(this.statusOptions, row.status);
            },
        }
    };
</script>
<style lang="scss">
  .w85{
    width: 100%;
    .el-form-item__content{
      width: 80%;
    }
  }
</style>
<style lang="scss" scoped>
  .title{
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    .backBtn{
      float: right;
    }
  }
  .mt10{
    margin-top: 10px;
  }
</style>
