<template>
  <div class="app-container">
        <el-card>
            <div slot="header" class="card-title">报价单详情</div>
          <!-- 列表 -->
          <div class="offer-header">
              <span style="font-size: 15px;">报价单号：{{list.number}}</span>
              <div class="btns">
            <el-button size="mini" type="primary"  @click="$router.push('edit?id=' + offerId)">编辑</el-button>
                <el-button type="primary" size="mini" @click="handleAdd"
                >跟进</el-button>
                <el-button type="primary" size="mini" @click="toResult"
                >结果</el-button>
                <el-button size="mini" type="primary" @click="$router.push('/offer/special/' + offerId)">特价</el-button>
                <el-button type="danger" size="mini" @click="handleDelete"
                >删除</el-button>
              </div>
          </div>
          <div>
            <div class="title-font">
              <label>报价单所属：发件人</label>
            </div>
                <el-descriptions :column="3" border class="card">
                    <el-descriptions-item label="发货人:">
                        {{consigneeData[0].name || '无'}}
                    </el-descriptions-item>
                    <el-descriptions-item label="手机号：">
                        {{consigneeData[0].defaultContactPhone || '无'}}
                    </el-descriptions-item>
                    <el-descriptions-item label="联系地址：">
                       {{consigneeData[0].address || '无'}}
                    </el-descriptions-item>
                    <el-descriptions-item label="客户来源：">
                      {{consigneeData[0].source || '无'}}
                    </el-descriptions-item>
                    <el-descriptions-item label="发货人公司名称:">
                       {{consigneeData[0].company || '无'}}
                    </el-descriptions-item>
                    <el-descriptions-item label="社交软件：">
                       {{consigneeData[0].defaultSocial?consigneeData[0].defaultSocial:'无'+' '+consigneeData[0].defaultSocialNumber?consigneeData[0].defaultSocialNumber:''}}
                    </el-descriptions-item>
                </el-descriptions>

               <el-descriptions :column="3" border class="card">
                   <el-descriptions-item label="收货人:">
                       {{consigneeData[1].name|| '无'}}
                   </el-descriptions-item>
                   <el-descriptions-item label="手机号：">
                       {{consigneeData[1].defaultContactPhone|| '无'}}
                   </el-descriptions-item>
                   <el-descriptions-item label="联系地址：">
                     {{consigneeData[1].address|| '无'}}
                   </el-descriptions-item>
                   <el-descriptions-item label="客户来源：">
                     {{consigneeData[1].source|| '无'}}
                   </el-descriptions-item>
                   <el-descriptions-item label="收货人公司名称:">
                     {{consigneeData[1].company|| '无'}}
                   </el-descriptions-item>
                   <el-descriptions-item label="社交软件：">
                       {{consigneeData[1].defaultSocial?consigneeData[1].defaultSocial:'无'+' '+consigneeData[1].defaultSocialNumber?consigneeData[1].defaultSocialNumber:''}}
                   </el-descriptions-item>
               </el-descriptions>
              <div class="title-font">
                <label>始发地：{{list.departureName}}</label>
                <label>目的地：{{list.objectiveName}}</label>
              </div>

          </div>
        </el-card>

        <el-card class="card">
          <div slot="header" class="card-title">商品信息</div>
          <div style="overflow: auto;">
          <el-table v-loading="loading" border :data="list.offerProdRespVOList">
                <el-table-column label="序号" width="60px" fixed>
                  <template slot-scope="scope">
                      {{scope.$index + 1}}
                  </template>
                </el-table-column>
                <el-table-column label="商品类型" align="center" prop="goodsType" />
                <el-table-column label="中文名" align="center" prop="prodTitleZh" />
                <el-table-column label="英文名" align="center" prop="prodTitleEn" />
                <el-table-column label="品牌" width="100px">
                  <template slot-scope="scope">
                      {{scope.row.brand?'有':'无'}}
                  </template>
                </el-table-column>
                <el-table-column label="件数" width="90px" prop="num" />
                <el-table-column label="包装单位">
                  <template slot-scope="scope">
                      <dict-tag :value="scope.row.unit" :type="DICT_TYPE.ECW_PACKAGE_TYPE" defaultable />
                  </template>
                </el-table-column>
                <el-table-column label="箱规(m)" width="120px" prop="boxGauge" />
                <el-table-column label="体积(m³)" width="100px" prop="volume" />
                <el-table-column label="重量(kg)" width="100px" prop="weight" />
                <el-table-column label="货值(RMB)" width="100px" prop="worth">
                  <template slot-scope="scope">
                        {{scope.row.worth+scope.row.worthCurrency}}
                    </template>
                  </el-table-column>
                <el-table-column label="商品特性" width="200px" prop="prodAttrName" />
                <el-table-column label="运输方式" width="100px">
                  <template slot-scope="scope">
                      <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.transportId" />
                  </template>
                </el-table-column>
                <el-table-column label="出货渠道" width="100px" prop="channelName" />
                <el-table-column label="线路" width="200px" >
                  <template slot-scope="scope">
                    {{getRouterNameById(scope.row.lineId)}}
                  </template>
                  </el-table-column>
                <el-table-column label="运费">
                  <template slot-scope="scope">
                     {{'运费'+scope.row.seaFreight+scope.row.seaFreightCurrency+'/'+ scope.row.seaFreightVolume+'  清关费'+scope.row.clearanceFreight+scope.row.clearanceFreightCurrency+'/'+ scope.row.clearanceFreightVolume}}
                  </template>
                </el-table-column>
              </el-table>
              </div>
        </el-card>
        <el-card class="card">
          <div slot="header" class="card-title">费用小计</div>
            <el-descriptions border class="card">
              <el-descriptions-item label="总件数:">
                  {{list.estCostVO.totalNum}}
              </el-descriptions-item>
              <el-descriptions-item label="总货值：">
                  {{list.estCostVO.totalWorth}}
              </el-descriptions-item>
              <el-descriptions-item label="报价费：">
                {{list.estCostVO.insuranceFee}}
              </el-descriptions-item>
          </el-descriptions>
<!--          <el-descriptions border class="card">
            <el-descriptions-item label="佣金类型" :span="2" class="card">
                <dict-selector :type="DICT_TYPE.COMMISSION_TYPE" form-type="radio" fomtter="number"  :value="list.commissionType" defaultable />
            </el-descriptions-item>
          </el-descriptions> -->
        </el-card>
        <el-card class="card" v-for="(item, i) in list.transportRespVOList">
          <div slot="header" class="card-title">
            <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="item.transportId"></dict-tag>
          </div>
          <div class="line">
            <el-descriptions v-for="(lineItem,k) in item.lineData">
                <el-descriptions-item :label="[3,4].indexOf(item.transportId)>-1?('空运路线'+(k+1)):('海运路线'+(k+1))">
                    {{getRouterNameById(lineItem)}}
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions v-for="(channelItem,k) in item.channelData">
               <el-descriptions-item :label="出货渠道+key">
                   {{channelItem.nameZh}}
                </el-descriptions-item>
            </el-descriptions>
          </div>
          <el-descriptions class="card" v-if="[2,3,4].indexOf(item.transportId) > -1">
              <el-descriptions-item label="是否双清">
                  <dict-tag :type="DICT_TYPE.ECW_DOUBLE_CLEAR" :value="item.doubleClear"></dict-tag>
              </el-descriptions-item>
          </el-descriptions>
          <el-descriptions v-if="[3,4].indexOf(item.transportId) > -1">
              <el-descriptions-item label="航空公司">
                 {{item.airlineCompany}}
              </el-descriptions-item>
          </el-descriptions>
          <el-descriptions v-if="item.transportId==2">
              <el-descriptions-item label="船公司">
                 {{item.airlineCompany}}
              </el-descriptions-item>
          </el-descriptions>
          <el-descriptions v-if="[2,3,4].indexOf(item.transportId) > -1">
              <el-descriptions-item label="清关证书">
                 <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="item.customsClearCert"></dict-tag>
              </el-descriptions-item>
          </el-descriptions>
          <el-descriptions v-if="[2,3,4].indexOf(item.transportId) > -1">
              <el-descriptions-item label="清关证书备注">
                 {{item.remarks}}
              </el-descriptions-item>
          </el-descriptions>
          <el-descriptions class="card" v-if="[3,4].indexOf(item.transportId) > -1">
              <el-descriptions-item label="是否拆包">
                 <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="item.isUnpack"></dict-tag>
              </el-descriptions-item>
          </el-descriptions>
          <el-descriptions v-if="[3,4].indexOf(item.transportId) > -1">
              <el-descriptions-item label="单票立刻转运">
                <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="item.isSingleTicketTransport"></dict-tag>

                   <span style="margin-left:10px;color: #0000FF;">注：若只有一件，货到仓库立即发，选“是”，多件需仓库集运待发，选“否”</span>
              </el-descriptions-item>

          </el-descriptions>
          <el-descriptions v-if="[3,4].indexOf(item.transportId) > -1">
              <el-descriptions-item label="包装类型">
                 <dict-selector  form-type="checkbox"  :type="DICT_TYPE.ECW_PACKAGE_TYPE" multiple  v-model="item.packageType" />
              </el-descriptions-item>
          </el-descriptions>
          <el-descriptions v-if="[3,4].indexOf(item.transportId) > -1">
              <el-descriptions-item label="特需备注">
                {{item.packageRemarks}}
              </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card class="card">
          <div slot="header" class="card-title">通用信息</div>
            <el-descriptions >
              <el-descriptions-item label="唛头1">
                  {{list.marks}}
              </el-descriptions-item>
              <el-descriptions-item label="报关方式">
                  <dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="list.customsType"></dict-tag>
              </el-descriptions-item>
              </el-descriptions>
              <el-descriptions :column="4">
             <el-descriptions-item label="预计结束时间">
                  {{list.stopTime}}
              </el-descriptions-item>
              <el-descriptions-item label="控货">
                   {{list.control?'是':'否'}}
               </el-descriptions-item>
               <el-descriptions-item label="竞争对手">
                  {{list.competitor}}
                </el-descriptions-item>
                <el-descriptions-item label="重要程度">
                    <el-rate v-model="list.importance"></el-rate>
                 </el-descriptions-item>
          </el-descriptions>
          <el-descriptions >
             <el-descriptions-item label="价格有效期">
                 {{list.startTime}} 至 {{list.endTime}}
              </el-descriptions-item>
              <el-descriptions-item label="交货方式">
                <dict-tag :type="DICT_TYPE.ECW_TRADE_TYPE" :value="list.tradeType"></dict-tag>
                   {{list.tradeAdress}}
               </el-descriptions-item>
          </el-descriptions>
          <el-descriptions >
              <el-descriptions-item label="备注">
                   {{list.remarks}}
               </el-descriptions-item>
          </el-descriptions>
        </el-card>
  </div>
</template>

<script>
  import {DICT_TYPE} from  '@/utils/dict'
  import {getOffer,deleteOffer} from '@/api/ecw/offer'
  import {getProductAttrList} from '@/api/ecw/productAttr'
  import {getCustomerList,getCustomer} from '@/api/ecw/customer'
   import {getChannelLists,getChannel} from '@/api/ecw/channel'
   import {openedRouterList as getOpenedRouterList} from '@/api/ecw/warehouse'
  export default {
    name: "detail",
    components: {

    },
    data() {
      return {
        // 遮罩层
        loading: false,
        list: [],
        types:'package,bag',
        importance:1,
        productAttrList:[],
        offerId:0,
        //发货/收货人信息
        consigneeData:[],
        routerList:[]
      };
    },
    created() {
      getProductAttrList().then(res => this.productAttrList = res.data)
      if(this.$route.query.offerId){
        this.offerId = this.$route.query.offerId
        this.getList();
      }
    },
    methods: {
      /** 查询列表 */
      getList() {
        let that = this
        that.loading = true;
        // 执行查询
        getOffer(that.offerId).then(response => {
          that.list = response.data;
          that.list.transportRespVOList.forEach((item)=>{
            if(item.channelIds){
              getChannelLists({ids:item.channelIds}).then(res=>{
                item.channelData = res.data
              })
            }
            if(item.lineIds){
              let lineIdList = []
              if(item.lineIds.indexOf(',')>-1){
                lineIdList = item.lineIds.split(',')
              }else{
                lineIdList.push(item.lineIds)
              }
              item.lineData = lineIdList
            }
          })

          that.list.offerProdRespVOList.forEach((item)=>{
            if(item.channelId){
              getChannel(item.channelId).then(res=>{
                item.channelName = res.data.nameZh
              })
            }
            var arr = item.prodAttrIds.split(',')
            var prodAttrName = []
            arr.forEach((itemValue)=>{
                 var prodAttrCenter = this.productAttrList.filter(items=>items.id==itemValue)
                 if(prodAttrCenter.length>0){
                   prodAttrName.push(prodAttrCenter[0].attrName)
                 }
            })
            item.prodAttrName = prodAttrName.join(',')
            // num += item.num
          })

          that.loading = false;
          that.getCnsigneeData()
          that.getOpenedRouterList()
        });
      },
      // 获取路线
      getOpenedRouterList(){
          let params = {}
          if(this.list.departureId){
              params.startCityId = this.list.departureId
          }
          if(this.list.objectiveId){
              params.destCityId = this.list.objectiveId
          }
          getOpenedRouterList(params).then(res => this.routerList = res.data)
      },
      // 根据线路id显示线路名称
      getRouterNameById(routerId){
          // return routerId => {
              let router = this.routerList.find(item => item.id == routerId)
              console.log({router})
              if(router){
                  return router.startTitleZh + ' >>>' + router.destTitleZh
              }
              return '-'
          // }
      },
      // 获取发货/收货人
      getCnsigneeData(){
        let that = this
        let ids = that.list.consignorId+','+ that.list.consigneeId
        getCustomerList({ids:ids}).then(res => {
          that.consigneeData = res.data
          getCustomer(that.list.consignorId).then(res=>{
              that.consigneeData[0] = Object.assign(that.consigneeData[0],res.data)
          })
          getCustomer(that.list.consigneeId).then(res=>{
              that.consigneeData[1] = Object.assign(that.consigneeData[1],res.data)
          })
        })
      },
      /** 跟进按钮操作 */
      handleAdd() {
        this.$router.push({
          path: "/offer/logList",
          query:{
            offerId:this.offerId,
            relationId:this.list.consignorId
          }
        });
      },
      toResult(){
        this.$router.push({
          path: "/offer/result",
          query:{
            offerId:this.offerId,
            number:this.list.number
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete() {
        const offerId = this.offerId;
        this.$modal.confirm('是否确认删除报价单管理编号为"' + offerId + '"的数据项?').then(function() {
            return deleteOffer(offerId);
          }).then(() => {
            this.$router.push({
              path: "/offer/result"
            });
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {});
      },
    }
  };
</script>

<style>
  .card-title{
      font-size: 18px;
      font-weight: bold;
       margin-top: 10px;
  }
  .offer-header{
    padding-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .line{
    display: flex;
    align-items: center;
  }
  .line el-descriptions{
    flex: 1;
  }
  .btn{
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .title-font{
    font-size: 16px;
    font-weight: 600;
    margin-top: 20px;
  }
  .title-font label{
    margin-right: 20px;
  }
  .card{
    margin-top: 20px;
  }
</style>