<template>
  <div class="app-container">
    <div class="filter-container">

      <el-input size="mini" v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item" />
      <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
    </div>
    <div class="table-con">
      <el-table
        size="mini"
        :data="tableData"
        v-loading="listLoading"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        @row-click="currentAddress"
        border
      >
        <el-table-column
          label="#"
          align="center"
          type="index"
          :index="indexMethod">
        </el-table-column>
        <el-table-column label="操作" align="left" width="90" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button @click="jointOrderBtn(scope.row,scope.$index,scope.row.selectId)" type="primary" size="mini">
              对接
            </el-button>


          </template>
        </el-table-column>
        <el-table-column
          label="订单编号"
          width="130px"
        >
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单名称"
          show-overflow-tooltip
          width="150px"
        >
          <template slot-scope="{row}">
            <span>{{ row.orderName }}-{{ row.orderPrintDesc }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="客户名称"
          show-overflow-tooltip
          width="200px"
        >
          <template slot-scope="scope">
            <el-button  icon="el-icon-edit" title="指定客户" @click="clientListBtn(scope.row,scope.$index)" type="primary" size="mini">

            </el-button>
            <span v-if="search.idOrderSite==2">&nbsp;&nbsp;{{ scope.row.createMan }}</span>
            <span v-else>&nbsp;&nbsp;{{ scope.row.parentBusinessCompanyName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="产品类型"
          width="150px"
          show-overflow-tooltip
        >
          <template slot-scope="{row}">
            <span>{{ row.orderName }}</span>

          </template>
        </el-table-column>
        <el-table-column
          label="业务类型"
          width="140px"
          show-overflow-tooltip>
          <template scope="scope">
            <el-select @visible-change="handleClick(scope.row.businessKind)" size="small" v-model="scope.row.businessKind" filterable placeholder="请选择" style="width: 120px">
              <template>
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </template>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="发货方式"
          width="200px"
          show-overflow-tooltip>
          <template scope="scope">
            <el-select @visible-change="handleClick(scope.row.sendType)" size="small" v-model="scope.row.erpSendKind" filterable placeholder="请选择" style="width: 120px">
              <template  v-if="!scope.row.sendType">
                <el-option
                  v-for="item in shipData"
                  :key="item.id"
                  :label="item.modeName"
                  :value="item.modeName">
                </el-option></template>
              <template v-else>
                <el-option
                  v-for="item in logisticsData"
                  :key="item.id"
                  :label="item.logisticName"
                  :value="item.logisticName">
                </el-option>
              </template>
            </el-select>
            <el-checkbox style="width: 60px" v-model="scope.row.sendType" @change="chooseLogistics(scope.row,scope.$index)">物流</el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          width="60"
          label="订单印量"
        >
          <template slot-scope="{row}">
            <span>{{ row.orderQty }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="60"
          label="订单金额"
        >
          <template slot-scope="{row}">
            <span>{{ row.orderMoney_Invoice }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="150"
          show-overflow-tooltip
          label="文件名称"
        >
          <template slot-scope="{row}">
            <span v-if="row.printFileList.length>0">{{ row.printFileList[0].name}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="交货日期"
          width="200px"
        >
          <template scope="scope">
            <div class="block">
<!--              <el-date-picker-->
<!--                style="width: 130px;"-->
<!--                size="mini"-->
<!--                v-model="scope.row.sendDate"-->
<!--                type="date"-->
<!--                placeholder="选择日期">-->
<!--              </el-date-picker>-->
              <el-date-picker
                style="width: 180px;"
                v-model="scope.row.sendDate"
                type="datetime"
                size="mini"
                placeholder="选择日期时间"
                default-time="12:00:00"
                format="yyyy-MM-dd HH:mm"
                >
              </el-date-picker>
            </div>
<!--            <span>{{ scope.row.sendDate | getLongDay}}</span>-->
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          label="下单时间"
        >
          <template slot-scope="{row}">
            <span>{{ row.createDate | getLongTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="地址"
          show-overflow-tooltip
          width="200"
        >
          <template slot-scope="{row}">
            <span style="width: 200px">{{ row.sendProvince}}{{ row.sendCity}}{{ row.sendArea}}{{ row.sendDetail}}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="200"
          label="订单备注"
        >
          <template slot-scope="{row}">
            <span style="width: 200px;">{{ row.orderMemo }}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="订单详情"
          width="200"
        >
          <template slot-scope="{row}">
            <span style="width: 200px;">{{ row.stateMemo }}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="150"
          label="所属区域"
        >
          <template slot-scope="{row}">
            <span>{{ row.orderRegion }}</span>
          </template>
        </el-table-column>

        <el-table-column
          width="50"
          label="款数"
        >
          <template slot-scope="{row}">
            <span>{{ row.kindCount }}</span>
          </template>
        </el-table-column>

        <el-table-column
          width="75px"
          label="联系人"
        >
          <template slot-scope="{row}">
            <span>{{ row.sendLinkMan_Read}}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="90px"
          label="联系电话"
        >
          <template slot-scope="{row}">
            <span>{{ row.sendLinkPhone_Read}}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page" :limit.sync="listData.pageSize" @pagination="getTableInfo" />
    </div>
    <el-dialog
      title="客户列表"
      width="1200px"
      :visible.sync="innerVisible">
      <el-input v-model="search1.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getClient">
        搜索
      </el-button>
      <el-table
        :data="tableDataClient"
        v-loading="listLoading"
        style="width: 100%;margin: 20px 0;"
        size="mini"
        row-key="id"
        border>
        <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button @click="checkThis(row)" type="primary" size="mini">
              选择
            </el-button>


          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="clientCode"-->
<!--          label="客户编号">-->
<!--        </el-table-column>-->
        <el-table-column
          label="客户名称"
          width="150px"
          show-overflow-tooltip
          prop="clientName"
        >
        </el-table-column>

        <el-table-column
          width="80px"
          prop="levelName"
          label="客户级别">
        </el-table-column>
        <el-table-column
          width="150"
          prop="contactPhone"
          label="联系电话">
        </el-table-column>
        <el-table-column
          align="left"
          class-name="status-col"
          show-overflow-tooltip
          label="联系地址">
          <template slot-scope="{row}">
            <span class="ellipsis"><span v-if="row.province">{{row.province}}</span><span v-if="row.city">{{row.city}}</span><span v-if="row.area">{{row.area}}</span><span v-if="row.address">{{row.address}}</span></span>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="listData1.total>0" :total="listData1.total" :page.sync="listData1.page" :limit.sync="listData1.pageSize" @pagination="getClient" />
    </el-dialog>
    <el-dialog
      title="对接产品类型"
      :visible.sync="dialogVisibleSection"
      width="350px">
      <el-button size="small" type="primary" plain v-if="sectionData.length>0" @click="checkThisSection(sectionData[0])" style="font-size: 15px">{{sectionData[0].value}}</el-button><br><br>
      <el-button size="small" type="success" plain v-if="sectionData.length>0" @click="checkThisSection(sectionData[1])" style="font-size: 15px">{{sectionData[1].value}}</el-button>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisibleSection = false">取 消</el-button>
    </span>
    </el-dialog>
    <el-dialog title="选择产品类型" :close-on-click-modal="false" :visible.sync="createOrderVisible" width="500px">
      <el-form label-width="80px" label-position="right">
        <el-form-item label="产品类型" prop="productName">
          <el-select
            style="width: 300px"
            filterable
            placeholder="请选择"
            value-key="id"
            @change="productInfoChange">
            <el-option
              v-for="item in productList"
              :key="item.id"
              :label="item.productName"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createOrderVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import {
  getRemoteOrderList, getSimpleProductInfoList,
  processJointOrder
} from '@/api/order/orderList.js'
import {
  getInfo
} from '@/api/doc/client/client.js'
import {getDeptList} from "@/api/complaint/complaintDetails";
import {getLogisticsInfoList, getshipModeListInfo} from "@/api/order/orderDetail";
export default {
  name: "lockingOderList",
  data() {
    return {
      options: [{
        id: 0,
        name: '正常业务',
      }, {
        id: 1,
        name: '外协业务'
      }, {
        id: 2,
        name: '物料订单'
      }],
      productList:[],
      createOrderVisible:false,
      rowIndex:"",
      dialogVisibleSection:false,
      sectionData:[],
      logisticsData:[],//物流
      shipData:[],//货运
      sendKinds: [],
      indexRow:999,
      rowData:{},
      innerVisible:false,
      tableDataClient:[],
      tempRoute: {},
      title:"",
      listLoading: false,
      tableData: [],
      search: {
        keyWord:'',
        idOrderSite:""
      },
      listData:{
        total:0,
        page: 1,
        pageSize:10
      },
      search1: {
        keyWord:'',
      },
      listData1:{
        total:0,
        page: 1,
        pageSize:10
      }
    }
  },
  mounted() {
    var urlArray = window.location.href.split(":id");
    if(urlArray.length==2 && (urlArray[1]==2 || urlArray[1]==3)){
      this.getTableInfo();
      this.getClient();
      this.getSendKind();
      this.getLogisticsInfo();
      this.getProductInfo();
    }else {
      this.$message.error("网址错误！");
    }

  },
  methods: {
    businessKindChange(val){
      const _that = this;
      console.log(_that.rowIndex);
      console.log(val.id);
      _that.$set(_that.tableData[_that.rowIndex], 'businessKind',val.id);
    },
    checkThisSection(data){
      const _that = this;
      _that.tableData[_that.rowIndex].orderName = data.value;
      _that.tableData[_that.rowIndex].id_Product = data.id;
      _that.$set(_that.tableData[_that.rowIndex], 'selectId',1);
      _that.dialogVisibleSection = false;
      _that.postProcessJointOrder(_that.tableData[_that.rowIndex],_that.rowIndex,1)
    },
    productInfoChange(val) {
      // console.log(val)
      const _that = this;
      _that.tableData[_that.rowIndex].id_Product = val.id;
      _that.tableData[_that.rowIndex].orderName = val.productName;
      _that.$set(_that.tableData[_that.rowIndex], 'selectId',1);
      _that.createOrderVisible = false;
      _that.postProcessJointOrder(_that.tableData[_that.rowIndex],_that.rowIndex,1)
    },
    handleClick(sendType){
      const _that = this;
      // if (sendType) {
      //   _that.getLogisticsInfo()
      // } else {
      //   _that.getSendKind()
      // }
    },
    // 选择物流档案
    chooseLogistics(row,index) {
      const _that = this;
      // console.log(row.sendType);
      // console.log(index);
      _that.tableData[index].sendType = row.sendType;
      for (let i = 0; i < _that.tableData.length; i++) {
        // _that.$set(_that.tableData[i], 'sendType', row.sendType);
      }
      // if (row.sendType) {
      //   _that.getLogisticsInfo()
      // } else {
      //   _that.getSendKind()
      // }
    },
    currentAddress(row, event, column) {
      // const _that = this
      // if (row.sendType) {
      //   _that.getLogisticsInfo()
      // } else {
      //   _that.getSendKind()
      // }
    },
    // 获取发货方式
    getSendKind() {
      var _that = this
      getshipModeListInfo().then(response => {
        // console.log('getSendKind', response)
        _that.shipData = response.data;
        // console.log(_that.sendKinds);
      }).catch(err => {
        // console.log(err)
      })
    },
    // 获取物流档案
    getLogisticsInfo() {
      var _that = this;
      var data = {
        params: {
          enable: 1
        }
      }
      getLogisticsInfoList(data).then(response => {
        // console.log('getSendKind', response)
        _that.logisticsData = response.data;
        // console.log(_that.sendKinds);
      }).catch(err => {
        // console.log(err)
      })
    },
    jointOrderBtn(row,index,selectId){
      // console.log("1111",row.sendDate);
      var _that = this;
      _that.postProcessJointOrder(row,index,selectId)

    },
    postProcessJointOrder(row,index,selectId){
      const _that = this;
      _that.rowIndex = index;
      _that.sectionData = [];
      if(row.sendDate!=undefined && row.sendDate!="" && row.sendDate!=null){
        var t, y, m, d, h, i;
        t = new Date(row.sendDate);
        y = t.getFullYear();
        m = t.getMonth() + 1;
        d = t.getDate();
        h = t.getHours();
        i = t.getMinutes();
        var datetime = y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i);
      }else {
        var datetime = null;
      }
      if(row.businessKind!=0 && row.businessKind!=1 && row.businessKind!=2){
        _that.$message("请先选择业务类型");
        return
      }
      if(!row.erpSendKind){
        _that.$message("请先选择发货方式");
        return
      }
      var url = window.location.href.split(":id");
      var webId = url[1];
      if(row.printFileList.length>0){
        var filePath = row.printFileList[0].filePath;
      }else {
        var filePath = "";
      }
      if(row.printFileList.length>0){
        var fileName = row.printFileList[0].name;
      }else {
        var fileName = "";
      }
      if(selectId==0){
        var id_Product = 0;
      }else {
        var id_Product = row.id_Product;
      }
      var data = {
        id:row.id,
        orderCode:row.orderCode,
        orderName:row.orderName,
        orderPrintDesc:row.orderPrintDesc,
        createMan:row.createMan,
        parentBusinessCompanyName:row.parentBusinessCompanyName,
        orderQty:row.orderQty,
        orderMoney_Total:row.orderMoney_Total,
        orderMoney_Invoice:row.orderMoney_Invoice,
        logisticsMoney:row.logisticsMoney,
        orderMemo:row.orderMemo,
        stateMemo:row.stateMemo,
        productSize:row.productSize,
        orderRegion:row.orderRegion,
        kindCount:row.kindCount,
        sendDate:datetime,
        sendLinkMan_Read:row.sendLinkMan_Read,
        sendLinkPhone_Read:row.sendLinkPhone_Read,
        sendProvince:row.sendProvince,
        sendCity:row.sendCity,
        sendArea:row.sendArea,
        sendDetail:row.sendDetail,
        filePath:filePath,
        name:fileName,
        webId:webId,
        erpSendKind:row.erpSendKind,
        businessKind:row.businessKind,
        id_Product:id_Product
      }
      var params = JSON.stringify(data)
      processJointOrder(params).then(res => {
        // console.log('getDeptList', res)
        if(res.httpCode == 200){
          if(res.data=="-3"){
            var msg  = res.msg;
            var msgArray = res.msg.split("+");
            console.log(msgArray);

            for (let i = 0; i < msgArray.length; i++) {
              var parms = {
                value:"",
                id:""
              }
              var dataItem = msgArray[i].split(":");
              parms.id = dataItem[0]
              parms.value = dataItem[1];
              _that.sectionData.push(parms)
            }
            _that.dialogVisibleSection = true;
            console.log(_that.sectionData);


          }else if (res.data=="-2"){
            _that.createOrderVisible  = true;
          }else {
            _that.$message("对接成功")
            _that.getTableInfo();
          }

        }else {
          console.log(res);
        }

      }).catch(err => {
        console.log('getDeptList', err)
        // _that.$message.error(err)
      })
    },
    checkThis(row){
      const _that = this;
      _that.innerVisible = false;
      // console.log(row.clientName)
      _that.tableData[_that.indexRow].parentBusinessCompanyName = row.clientName;
      _that.tableData[_that.indexRow].createMan = row.clientName;
    },
    // 获取产品列表
    getProductInfo() {
      const _that = this
      var data = {}
      // console.log(data);
      getSimpleProductInfoList(data).then(response => {
        // console.log(response)
        const data = response.data
        _that.productList = data
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    clientListBtn(row,index){
      const _that = this;
      if(!row.erpSendKind){
        _that.$message("请先选择发货方式");
        return
      }
      _that.innerVisible = true;
      _that.search1.keyWord = "";
      _that.rowData = row;
      _that.indexRow = index;
    },
    getClient(){
      const _that = this;
      _that.listLoading = true;
      var params = _that.search1
      var page = {
        pageIndex: _that.listData1.page,
        pageSize: _that.listData1.pageSize
      }
      if (_that.search1.keyWord) {
        var data = {
          'params': JSON.stringify(params),
          'page': JSON.stringify(page)
        }
      } else {
        var data = {
          'params': {},
          'page': JSON.stringify(page)
        }
      }
      getInfo(data).then(response => {
        // console.log("tableData",response)
        const data = response.data;
        // //  组合表单数据
        _that.tableDataClient = data
        _that.listData1.total = response.total
        // console.log(_that.tableData)
        _that.listLoading = false
      }).catch(err => {
        _that.listLoading = false
      })
    },
    handleUpdate(){
      const _that = this;
    },
    //获取表格数据
    getTableInfo(){
      const _that = this;
      var url = window.location.href.split(":id");
      _that.search.idOrderSite=url[1];
      _that.listLoading = true
      var params = _that.search;
      var page = {
        pageIndex:_that.listData.page,
        pageSize: _that.listData.pageSize,
      }
      var data = {
        "idOrderSite": _that.search.idOrderSite,
        "page": JSON.stringify(page),
      }
      // console.log(data);
      getRemoteOrderList(data).then(response => {
        _that.listLoading = false;
        // console.log("tableData",response.collection.siteName)
        const data = response.data;
        _that.title = response.collection.siteName;
        _that.tempRoute = Object.assign({}, this.$route);
        _that.setTagsViewTitle();
        // //  组合表单数据
        _that.tableData = data;
        _that.listData.total = response.total;
        // console.log(_that.tableData)
        _that.listLoading = false
        for (let i = 0; i < _that.tableData.length; i++) {
          _that.$set(_that.tableData[i], 'sendType', false);
          _that.$set(_that.tableData[i], 'erpSendKind', "");
          _that.$set(_that.tableData[i], 'selectId', "0");
          _that.$set(_that.tableData[i], 'businessKind', 0)
        }
      }).catch(err => {
        _that.listLoading = false;
      })
    },
    setTagsViewTitle() {
      const title = '对接订单';
      // console.log('tempRoute2', this.tempRoute)
      const route = Object.assign({}, this.tempRoute, {title: `${title}-${this.title}`})
      //console.log('route', route)
      this.$store.dispatch('tagsView/updateVisitedView', route);
    },
    //搜索
    searchData(){
      var urlArray = window.location.href.split(":id");
      if(urlArray.length==2 && (urlArray[1]==2 || urlArray[1]==3)){
        this.listData.page = 1;
        this.getTableInfo()
      }else {
        this.$message.error("网址错误！");
      }

    },
    //序号
    indexMethod(index) {
      return index+1;
    }
  }
}
</script>

<style scoped>

</style>
