// 计费详单
<template>
  <div class="steelDetailsOrder">
    <div class="sache">
      <label class="el-form-item__label" style="width: auto;">订单日期：</label>
      <el-date-picker
        v-model="startTime"
        type="date"
        placeholder="选择日期"
        style="width:200px"
      >
      </el-date-picker>
      <span>至</span>
      <el-date-picker
        v-model="endTime"
        type="date"
        placeholder="选择日期"
        style="width:200px"
      >
      </el-date-picker>
      <el-input placeholder="请输入内容" v-model="input" clearable> </el-input>

      <el-button type="primary" class="btn" @click="onclick">
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-button type="primary" @click="exportAllExcel"
        ><i class="el-icon-download"></i>导出Excel</el-button
      >
    </div>
    <div class="table">
      <el-tabs v-model="activeName">
        <!-- 未结算 -->
        <el-tab-pane label="未结算" name="first">
          <mergeRowTable
            v-bind.sync="options1"
            ref="excelDom"
            :stripe="false"
            :isPagination="false"
          >
            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <el-button
                  v-if="ssoId == null"
                  type="text"
                  size="small"
                  @click="priceValueUpdate(scope.row)"
                  >修改详单地址</el-button
                >
              </template>
            </el-table-column>
          </mergeRowTable>
        </el-tab-pane>
        <!-- 已结算 -->
        <el-tab-pane label="已结算" name="second">
          <mergeRowTable v-bind.sync="options2"> </mergeRowTable>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-drawer
      title="修改详单地址"
      :visible.sync="dialogFormVisible"
      size="40%"
    >
      <!--        <el-form-item label="原详单地址" :label-width="formLabelWidth">-->
      原详单地址
      <el-input
        style="width:250px"
        v-model="originalAddress"
        disabled
      ></el-input>
      <label>原单价</label>
      <el-input
        style="width:100px"
        v-model="originalPriceValue"
        disabled
      ></el-input>
      <!--        </el-form-item>-->
      <!---->
      <el-input
        v-model="addresText"
        placeholder="请输入内容"
        style="margin-top: 10px; margin-left: 20px; width: 250px"
        @keyup.native.enter="selectAddresClick"
      ></el-input>
      <el-button
        type="primary"
        @click="selectAddresClick"
        :loading="selectLineLoading"
        ><i class="el-icon-search"></i>查询</el-button
      >
      <div class="tablecls">
        <!-- 查询所有的运输单价 -->
        <vue-scorll :ops="ops" style="width: 100%;height: 100%">
          <dilTable
            v-bind.sync="Address"
            @radio-change="currentRadioChange2"
            :drawer="aaadrawer"
          ></dilTable>
        </vue-scorll>
      </div>
      <div class="opreation">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="makeSure">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getCookie } from '@/utils/util.js'
import { sjTime } from '@/utils/sharedJsFile'
export default {
  data() {
    return {
      aaadrawer: false,
      pageSize: 100,
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          keepShow: true
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: '#5f9ea0', //滚动条颜色
          opacity: 0.8, //滚动条透明度
          'overflow-x': 'hidden'
        }
      },
      tableTitle: '销售钢材汽运结算详单',
      endTime: null,
      startTime: null,
      //已选中 省市县(区)
      address: null,
      //具体收货地址
      place: null,
      //收货地址id
      addressId: null,
      //省市县(区)查询值
      addresText: null,
      noSettleDetailsColumn: [],
      //单价
      Fee: null,
      //加载
      selectLineLoading: false,
      input: '',
      activeName: 'first',
      ssoId: null,
      //详单Id
      detailsId: null,
      options1: {
        // first请求数据的地址
        requestUrl: '',
        comparison: 'orderId',
        columnIndexs: [0, 2, 3, 4, 5, 7, 13, 14, 16, 17, 18]
      },
      options2: {
        // second请求数据的地址
        requestUrl: ''
      },
      //是否打开修改详单地址弹出框
      dialogFormVisible: false,
      //是否打开增加途损弹出框
      dialogDamage: false,
      //原详单单价
      originalPriceValue: null,
      //新详单单价
      newPriceValue: null,
      //原详单地址
      originalAddress: null,
      //新详单地址
      newAddress: null,
      //新单价Id
      priceId: null,
      //是否打开运输单价的模态框
      addressDrawer: false,
      //运输单价的表格
      Address: {
        requestUrl: '/api/v1/ams/getAddressDeliveryAddress?apiId=511',
        selectionType: 'radio'
      },
      // addressText:null,
      //缓存当前选中的运输单价
      priceMap: {},
      formLabelWidth: '125px',
      orderId: null,
      placeId: null
    }
  },
  created() {
    this.options1GetRequestUrl()
    this.options2GetRequestUrl()
  },
  methods: {
    //excel方法
    exportAllExcel() {
      let startTime = null
      let endTime = null
      let carrierSsoId = null
      if (getCookie('orgCode') == 'chengyunshang') {
        carrierSsoId = getCookie('userId')
      }
      if (this.startTime && this.endTime) {
        startTime = sjTime(this.startTime)
        endTime = sjTime(this.endTime)
      }
      if (this.activeName == 'first') {
        console.log('进入了first')
        this.tableTitle = '销售钢材汽运结算详单(未结算)'
        this.axios
          .post(
            '/api/v1/bms/getSteelTruckDetailsOrder?apiId=507&orderType=1&con=' +
              this.input +
              '&startTime=' +
              startTime +
              '&endTime=' +
              endTime +
              '&status=0' +
              '&i=' +
              new Date()
          )
          .then(res => {
            console.log(res.data.data)
            console.log('测试打印功能')
            console.log()
            this.exportAllList = res.data.data.list
            this.noSettleDetailsColumn = res.data.data.columnData
            this.exportAllReportToExcel(
              this.tableTitle,
              this.exportAllList,
              this.noSettleDetailsColumn
            )
          })
      } else if (this.activeName == 'second') {
        console.log('进入了second')
        this.tableTitle = '销售钢材汽运结算详单(已结算)'
        this.axios
          .post(
            '/api/v1/bms/getSteelTruckDetailsOrder?apiId=507&orderType=1&carrierSsoId=' +
              this.ssoId
          )
          .then(res => {
            this.exportAllList = res.data.data
            console.log('测试2')
            console.log(res)
            this.exportAllReportToExcel(
              this.tableTitle,
              this.exportAllList,
              this.settleDetailsColumn
            )
          })
      }
    },
    //导出excel
    exportAllReportToExcel(tableTitle, dataArr, columnData) {
      var title = tableTitle
      let tHeader = []
      let filterVal = []
      columnData.forEach(e1 => {
        if (tHeader.indexOf(e1.label) === -1) {
          tHeader.push(e1.label)
        }
        if (filterVal.indexOf(e1.prop) === -1) {
          filterVal.push(e1.prop)
        }
      })
      //导出为excel
      this.downloadLoading = true
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require('@/assets/excel/Export2Excel.js') //这里必须使用绝对路径，使用@/+存放export2Excel的路径
        // let list = this.$refs.excelDom.dataTabel;
        let data = dataArr.map(v => filterVal.map(j => v[j])) //3.formatJson格式转换
        export_json_to_excel(tHeader, data, title) // (title)导出的表格名称
      })
    },
    //未结算数据
    options1GetRequestUrl() {
      if (getCookie('orgCode') == 'chengyunshang') {
        this.ssoId = getCookie('userId')
        this.options1.requestUrl =
          '/api/v1/bms/getSteelTruckDetailsOrder?apiId=507&orderType=1&carrierSsoId=' +
          getCookie('userId')
      } else {
        this.options1.requestUrl =
          '/api/v1/bms/getSteelTruckDetailsOrder?apiId=507&orderType=1&carrierSsoId=' +
          this.ssoId
      }
    },
    //已结算数据
    options2GetRequestUrl() {
      if (getCookie('orgCode') == 'chengyunshang') {
        this.options2.requestUrl =
          '/api/v1/bms/getSteelTruckDetailsOrder?apiId=507&orderType=1&carrierSsoId=' +
          getCookie('userId')
      } else {
        this.options2.requestUrl =
          '/api/v1/bms/getSteelTruckDetailsOrder?apiId=507&orderType=1&carrierSsoId=' +
          this.ssoId
      }
    },
    //收货地址弹出层
    handleSelect1(item) {
      console.log('获取所有下拉值!')
    },
    //查询全国省市县
    selectAddresClick() {
      if (this.addresText) {
        this.Address.requestUrl =
          '/api/v1/ams/getAddressDeliveryAddress?apiId=511&con=' +
          this.addresText
      } else {
        this.Address.requestUrl =
          '/api/v1/ams/getAddressDeliveryAddress?apiId=511&i=' + new Date()
      }
    },
    //以下是收货地址边输边查搜索
    querySearch1(queryString, cb) {
      this.axios
        .post(
          '/api/v1/ams/getRealAddressByLike?addressId=' +
            this.addressId +
            '&index=' +
            queryString
        )
        .then(res => {
          if (res.data.code == '200') {
            var restaurants = res.data.data
            var results = queryString
              ? restaurants.filter(this.createFilter1(queryString))
              : restaurants
            // 调用 callback 返回建议列表的数据
            cb(results)
          }
        })
    },
    createFilter1(queryString) {
      return restaurants => {
        return (
          restaurants.value.toLowerCase().indexOf(queryString.toLowerCase()) >
          -1
        )
      }
    },
    //以上是收货地址边输边查搜索
    toInsert() {
      this.$router.push('/insertCheckInventory')
    },
    // getclick(scope){
    //   this.$router.push("/getTransportResult/"+scope.row.orderId)
    // },
    //增加途损
    onclick() {
      console.log('查询待定值')
      let startTime = null
      let endTime = null
      let carrierSsoId = null
      if (getCookie('orgCode') == 'chengyunshang') {
        carrierSsoId = getCookie('userId')
      }
      if (this.startTime && this.endTime) {
        startTime = sjTime(this.startTime)
        endTime = sjTime(this.endTime)
      }
      this.options1.requestUrl =
        '/api/v1/bms/getSteelTruckDetailsOrder?apiId=507&orderType=1&con=' +
        this.input +
        '&startTime=' +
        startTime +
        '&endTime=' +
        endTime +
        '&status=0' +
        '&i=' +
        new Date()
      this.options2.requestUrl =
        '/api/v1/bms/getSteelTruckDetailsOrder?apiId=507&orderType=1&con=' +
        this.input +
        '&startTime=' +
        startTime +
        '&endTime=' +
        endTime +
        '&status=1' +
        '&i=' +
        new Date()
    },
    //修改详单单价
    priceValueUpdate(row) {
      this.orderId = row.orderId
      this.originalAddress = row.realAddress
      this.originalPriceValue = row.priceValue
      this.detailsId = row.detailsId
      this.Address.requestUrl =
        '/api/v1/ams/getAddressDeliveryAddress?apiId=511&i=' + new Date()
      this.dialogFormVisible = true
    },
    //运输订单点击浏览的事件
    select() {
      this.addressDrawer = true
    },
    //运输单价模态窗口的框计算
    selectAddressClick() {
      this.Price.requestUrl =
        '/api/v1/ams/getAddressDeliveryAddress?apiId=255&con=' +
        this.addressText
    },
    //运输单价模态窗口的点击事件
    addAddressClick() {
      //获取运输单价和运输单价ID
      let map = {
        place: this.place,
        addressId: this.addressId
      }
      this.axios.post('/api/v1/ams/getPriceMap', map).then(res => {
        if (res.data.data.priceId == -1) {
          this.newPriceValue = '未录单价!'
          this.priceId = null
        } else {
          //赋值运输单价和运输单价ID
          this.newPriceValue = res.data.data.priceValue //this.priceMap.priceValue
          this.priceId = res.data.data.priceId //this.priceMap.priceId
        }
      })
      //priceMap
      this.newAddress = this.address + this.place
      this.addressDrawer = false
    },
    //运输单价模态框单选选中的事件
    currentRadioChange2(val) {
      console.log(val)
      //若具体地址有值，清空值
      if (this.place != null) {
        this.place = null
      }
      this.placeId = val.placeId
      this.address = val.address
      this.addressId = val.addressId
      this.priceId = val.priceid
      // this.priceMap = {};
      // this.priceMap = val;
    },
    //确认修改详单单价
    makeSure() {
      //若没有单价Id
      if (this.priceId == null) {
        this.$message.error('该区域没有录入单价,不可修改!')
      } else {
        this.dialogFormVisible = false
        let mapValue = {
          orderId: this.orderId,
          detailsId: this.detailsId,
          priceId: this.priceId,
          placeId: this.placeId
        }
        //是否确定修改详单地址!
        this.$confirm('确定修改', '提示', {
          confirmButtonText: '仅修改单价',
          cancelButtonText: '修改下货地址和单价',
          distinguishCancelAndClose: true,
          type: 'warning',
          center: true
        })
          .then(() => {
            //初始化修改详单地址对话框的信息
            this.newPriceValue = null
            this.newAddress = null
            this.address = null
            this.addresText = null
            this.addressId = null
            this.priceId = null
            this.axios
              .post('/api/v1/bms/updateDetailsOrder', mapValue)
              .then(res => {
                if (res.data.code == '0') {
                  this.$message.success('修改详单单价成功!')
                  let startTime = null
                  let endTime = null
                  let carrierSsoId = null
                  if (getCookie('orgCode') == 'chengyunshang') {
                    carrierSsoId = getCookie('userId')
                  }
                  if (this.startTime && this.endTime) {
                    startTime = sjTime(this.startTime)
                    endTime = sjTime(this.endTime)
                  }
                  //重置未结算详单表单信息
                  this.options1.requestUrl =
                    '/api/v1/bms/getSteelTruckDetailsOrder?apiId=507&orderType=1&con=' +
                    this.input +
                    '&startTime=' +
                    startTime +
                    '&endTime=' +
                    endTime +
                    '&status=0' +
                    '&i=' +
                    new Date()
                } else {
                  this.$message.error('修改详单单价失败,请联系管理员!')
                }
              })
          })
          .catch(action => {
            if (action === 'cancel') {
              mapValue.updatePlace = 1
              this.newPriceValue = null
              this.newAddress = null
              this.address = null
              this.addresText = null
              this.addressId = null
              this.priceId = null
              this.axios
                .post('/api/v1/bms/updateDetailsOrder', mapValue)
                .then(res => {
                  if (res.data.code == '0') {
                    this.$message.success('修改详单单价和地址成功!')
                    let startTime = null
                    let endTime = null
                    let carrierSsoId = null
                    if (getCookie('orgCode') == 'chengyunshang') {
                      carrierSsoId = getCookie('userId')
                    }
                    if (this.startTime && this.endTime) {
                      startTime = sjTime(this.startTime)
                      endTime = sjTime(this.endTime)
                    }
                    //重置未结算详单表单信息
                    this.options1.requestUrl =
                      '/api/v1/bms/getSteelTruckDetailsOrder?apiId=507&orderType=1&con=' +
                      this.input +
                      '&startTime=' +
                      startTime +
                      '&endTime=' +
                      endTime +
                      '&status=0' +
                      '&i=' +
                      new Date()
                  }
                })
            }
            //初始化修改详单地址对话框的信息
          })
      }
    }
  }
}
</script>

<style lang="scss" scode>
.steelDetailsOrder {
  .sache {
    margin-left: 20px;
    margin-top: 20px;
    .el-input {
      width: 250px;
    }
  }
  .table {
    margin-left: 20px;
    margin-top: 20px;
  }
  .opreation {
    width: 300px;
    height: 200px;
  }
}
</style>
