<template>
  <div class="app-container setting-main">
    <div class="app-container-search main-radius">
      <h1 style="margin: 0;">商品信息配置</h1>
    </div>
    <div class="app-container-search main-bgcolor main-radius setting-container">
      <div class="setting-title">当前批次基本信息</div>
      <el-row class="setting-content">
        <el-col :span="6"><div class="">批次号：{{info.harvestBatchId}}</div></el-col>
        <el-col :span="6"><div class="">所属商户：{{info.belongBusinessName}}</div></el-col>
        <el-col :span="6"><div class="">商品名称：{{info.goodsName}}</div></el-col>
      </el-row>
    </div>
    <!-- 商品信息 -->
    <div class="app-container-search main-bgcolor main-radius setting-container">
      <div class="setting-title flex-jcenter">
        <div>
          <span class="mr-6">{{goodsInfo.linkName?goodsInfo.linkName:'商品信息'}}</span>
          <div class="setting-tag mr-6">{{goodsInfo.isChainStatus?'已上传':'未上传'}}</div>
          <span class="fs-12 mr-6" v-if="!goodsInfo.isChainStatus">数据上传</span>
          <el-switch v-model="goodsInfo.chainState" :active-value="1" :inactive-value="0" v-if="!goodsInfo.isChainStatus"></el-switch>
        </div>
        <div v-if="goodsInfo.chainState && goodsInfo.isChainStatus">
          <span class="fs-12 mr-6" >扫码展示</span>
          <el-switch v-model="goodsInfo.scanShow" :active-value="true" :inactive-value="false"></el-switch>
        </div>
      </div>
      <el-form :rules="rules" ref="goodsInfo" :model="goodsInfo" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="环节名称" prop="linkName">
              <el-input v-model="goodsInfo.linkName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <operateInfo
      :operateDetails="goodsInfo.operateDetails"
      :chainState="0"
      :typeList="typeList"
      :type="'goods'"
      >
      </operateInfo>
    </div>
    <!-- 企业信息 -->
    <div class="app-container-search main-bgcolor main-radius setting-container">
      <div class="setting-title flex-jcenter">
        <div>
          <span class="mr-6">{{businessInfo.linkName?businessInfo.linkName:'企业信息'}}</span>
          <div class="setting-tag mr-6">{{businessInfo.isChainStatus?'已上传':'未上传'}}</div>
          <span class="fs-12 mr-6" v-if="!businessInfo.isChainStatus">数据上传</span>
          <el-switch v-model="businessInfo.chainState" :active-value="1" :inactive-value="0" v-if="!businessInfo.isChainStatus"></el-switch>
        </div>
        <div v-if="businessInfo.chainState && businessInfo.isChainStatus">
          <span class="fs-12 mr-6" >扫码展示</span>
          <el-switch v-model="businessInfo.scanShow" :active-value="true" :inactive-value="false"></el-switch>
        </div>
      </div>
      <el-form :rules="rulesBusiness" ref="businessInfo" :model="businessInfo" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="环节名称" prop="linkName">
              <el-input v-model="businessInfo.linkName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <operateInfo
      :operateDetails="businessInfo.operateDetails"
      :chainState="0"
      :disable="businessInfo.isChainStatus?true:false"
      :typeList="typeList">
      </operateInfo>
    </div>
    <div class="app-container-search main-bgcolor main-radius setting-container">
      <div class="setting-title flex-jcenter">
        <div>
          <span class="mr-6">商品认证</span>
          <div class="setting-tag mr-6" v-if="verifyData.length>0">{{verifyStatus.isChainState?'已上传':'未上传'}}</div>
          <span class="fs-12 mr-6" v-if="verifyData.length>0 && !verifyStatus.isChainState">数据上传</span>
          <el-switch v-model="verifyStatus.chainState" :active-value="1" :inactive-value="0" v-if="verifyData.length>0 && !verifyStatus.isChainState"></el-switch>
        </div>
        <div v-if="verifyStatus.chainState && verifyStatus.isChainState">
          <span class="fs-12 mr-6" >扫码展示</span>
          <el-switch v-model="verifyStatus.scanShow" :active-value="true" :inactive-value="false"></el-switch>
        </div>
      </div>
      <el-table
      :data="verifyData"
      style="width: 100%">
        <el-table-column
          prop="verifyName"
          label="认证名称">
        </el-table-column>
        <el-table-column
          prop="verifyAgencies"
          label="认证机构">
        </el-table-column>
        <el-table-column
          prop="verifyIsForver"
          label="有效期">
        </el-table-column>
        <el-table-column
          prop="verifyDataUrl"
          label="认证资料">
          <template v-slot="{row}">
            <template v-if="row.verifyDataUrl != '--'">
              <el-image
                style="width: 60px; height: 60px;margin: 5px;"
                v-for="(item,index) in row.verifyDataUrl"
                :key="index"
                :src="item"
                :preview-src-list="row.verifyDataUrl"
                fit="fill"></el-image>
            </template>
            <template v-else>
              <span>{{row.verifyDataUrl}}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-popconfirm title="确定删除吗？" @confirm="deleteVerify($index)">
              <el-button slot="reference" type="text" size="small">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="setting-footer-btn">
      <el-button @click="$router.go(-1);">取消</el-button>
      <el-button type="primary" @click="submitSave">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { getGoodsConfig , createGoodsConfig , updateGoodsConfig } from '@/api/production/harvestBatch';
  import { getDictDataListByType } from '@/api/system/dict/data';
  import operateInfo from '@/components/Customer/operateInfo';
  export default{
    components:{
      operateInfo
    },
    data(){
      return{
        // 页面获取获取到的数据
        info: {},
        // 商品-环节信息
        goodsInfo: {
          operateDetails: [],
        },
        // 商品-认证信息
        goodsVerifys: {
          operateDetails: [],
        },
        // 商品-企业信息
        businessInfo: {
          operateDetails: [],
        },
        // 由goodsVerifys.operateDetails重组而成
        verifyData: [],
        // goodsVerifys第一个scanShow、chainState的信息
        verifyStatus: {},
        // 商品信息form
        form:{},
        // 商品信息goodsInfo.operateDetails
        operateDetails: [],
        // 可选种类列表
        typeList: [],
        // 规则 rules
        rules:{
          linkName: [
            { required: true, message: '请输入商品环节名称', trigger: 'blur' }
          ],
        },
        // 规则 rules
        rulesBusiness:{
          linkName: [
            { required: true, message: '请输入企业环节名称', trigger: 'blur' }
          ],
        },
        powerLimit: ['delete'],
      }
    },
    created() {
      let id = this.$route.query.id;
      console.log('this.$route:', this.$route)
      this.getGoodsConfig(id);
      this.initDate();
    },
    methods:{
      async initDate(){
        let typeParams = {
          page: 1,
          pageSize: 100,
          type: 'operate_detail_type',
        };
        let res = await getDictDataListByType(typeParams);
        this.typeList = res.data;
        console.log('类型列表',this.typeList)
      },
      getGoodsConfig(id){
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        getGoodsConfig({id}).then((res)=>{
          let info = res.data;
          this.info = info;
          info.goodsInfo.operateDetails.map(item=>{
            if(item.type == 7){
              item.content = JSON.parse(item.content);
              item.mapContent = item.content;
            }
          });
          info.businessInfo.operateDetails.map(item=>{
            if(item.type == 7){
              item.content = JSON.parse(item.content);
              item.mapContent = item.content;
            }
          });
          this.goodsInfo = JSON.parse(JSON.stringify(info.goodsInfo));
          this.goodsInfo.isChainStatus = this.goodsInfo.chainState?1:0;
          this.goodsInfo.linkName = this.goodsInfo.linkName?this.goodsInfo.linkName:'商品信息';
          this.businessInfo = JSON.parse(JSON.stringify(info.businessInfo));
          this.businessInfo.isChainStatus = this.businessInfo.chainState?1:0;
          this.businessInfo.linkName = this.businessInfo.linkName?this.businessInfo.linkName:'企业信息';
          this.goodsVerifys = JSON.parse(JSON.stringify(info.goodsVerifys));

          this.verifyData = [];
          if(info.goodsVerifys.length>0){
            this.verifyStatus = {
              scanShow: info.goodsVerifys[0].scanShow,
              chainState: info.goodsVerifys[0].chainState,
              isChainState: info.goodsVerifys[0].chainState?1:0,
            };
            info.goodsVerifys.map(item=>{
              let verifyDataUrl;
              if(item.operateDetails[3].content){
                let url = JSON.parse(JSON.stringify(item.operateDetails[3].content));
                if(url.indexOf(',')>-1){
                  verifyDataUrl = url.split(',');
                }else {
                  verifyDataUrl = [url];
                }
              }else{
                verifyDataUrl = '--';
              }
              this.verifyData.push({
                verifyName: item.operateDetails[0].content,
                verifyAgencies: item.operateDetails[1].content,
                verifyIsForver: item.operateDetails[2].content,
                verifyDataUrl,
              });
            });
          }

          loading.close();
        });
      },

      async submitSave(){
        if( !this.goodsInfo.linkName ){
          this.$message.error('商品环节名称不能为空');
          return false;
        }
        if( !this.businessInfo.linkName ){
          this.$message.error('企业环节名称不能为空');
          return false;
        }
        this.goodsInfo.operateDetails = this.goodsInfo.operateDetails.filter(item=>item.type != '');
        this.goodsVerifys.map(item=>{
          item.scanShow = this.verifyStatus.scanShow;
          item.chainState = this.verifyStatus.chainState;
        });
        let form = {
          goodsInfo: this.goodsInfo,
          goodsVerifys: this.goodsVerifys,
          businessInfo: this.businessInfo,
          id: this.$route.query.id,
        }
        let operateDetails = form.goodsInfo.operateDetails;
        operateDetails.map(item=>{
          if(item.type == '7'){//地图
            item.content = JSON.stringify(item.mapContent);
          }
        });
        form.businessInfo.operateDetails.map(item => {
          if(item.type == '7'){//地图
            item.content = JSON.stringify(item.mapContent);
          }
        });

        if(this.goodsInfo.id){
          console.log('保存更新rest',operateDetails);
          let rest = await updateGoodsConfig(form);
          if(rest.data){
            this.$message.success("保存成功");
            let id = this.$route.query.id;
            this.getGoodsConfig(id);
          }
          return;
        }
        let res = await createGoodsConfig(form);
        if(res.data){
          this.$message.success("保存成功");
          let id = this.$route.query.id;
          this.getGoodsConfig(id);
        }
        console.log('保存新建res',res);
      },
      deleteVerify(index){
        this.verifyData.splice(index,1);
        this.goodsVerifys.splice(index,1);
      },
    }
  }
</script>

<style>
</style>
