// 创建运输任务
<template>
  <div class="container">
    <el-row>
      <el-col :span="12">
        <h2 class="bg-left title">创建运输任务</h2>
      </el-col>
      <el-col :span="12" class="bg-right">
        <el-button
          class="bg-bottom"
          type="primary"
          size="small"
          @click="returnsales()"
          ><img
            width="6"
            height="10"
            style="vertical-align: bottom; margin-right: 3px"
            src="../../../public/img/lujing.png"
            alt=""
          />返回</el-button
        >
      </el-col>
    </el-row>
    <el-form
      ref="deptBudgetList"
      :rules="mainReportAdd"
      :model="deptBudgetList"
    >
      <ws-info-table class="el-table">
        <el-form-item label="任务编号" span="1" prop="taskNo" class="forlist">
          <el-input
            v-model="deptBudgetList.taskNo"
            placeholder="请输入任务编号"
            maxlength="20"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item prop="taskType" label="任务类型" span="1">
          <el-select
            v-model="deptBudgetList.taskType"
            placeholder=""
            class="typeselect"
            @change="selecttaskType"
          >
            <el-option
              v-for="item in taskType"
              :key="item.constKey"
              :label="item.constValue"
              :value="item.constValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="contractNo" label="合同编号" span="1">
          <el-select
            v-model="deptBudgetList.contractNo"
            placeholder="请输入合同编号"
            class="typeselect"
          >
            <el-option
              v-for="item in contractNoList"
              :key="item.constKey"
              :label="item.contractNo"
              :value="item.contractNo"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="goodsName" label="货名" span="1">
          <el-select
            v-model="deptBudgetList.goodsName"
            placeholder="货名"
            class="typeselect"
            @change="selectgoodsname"
          >
            <el-option
              v-for="item in goodnameList"
              :key="item.constKey"
              :label="item.constValue"
              :value="item.constValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="重量（吨）" span="1" prop="weight">
          <el-input
            v-model="deptBudgetList.weight"
            placeholder="请输入重量"
            maxlength="20"
            size="small"
          ></el-input>
        </el-form-item>
      </ws-info-table>
      <ws-info-table class="el-table">
        <div class="start-address">
          <el-radio v-model="deptBudgetList.warehouseType" label="1"
            >自有库发货</el-radio
          >
          <el-radio v-model="deptBudgetList.warehouseType" label="2"
            >临时库发货</el-radio
          >
          <el-select
            v-model="deptBudgetList.sendWarehouse"
            placeholder="选择仓库"
            class="typeselect"
          >
            <el-option
              v-for="item in warehouseList"
              :key="item.constKey"
              :label="item.warehouseName"
              :value="item.warehouseName"
            ></el-option>
          </el-select>
        </div>
        <el-form-item label="始发地" span="1" class="start-address">
          <el-cascader
            :options="options_"
            v-model="selectedOptions"
            clearable
            size="large"
            placeholder="请选择始发地"
            style="width: 200%"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item
          label="始发地详细地址"
          span="1"
          prop="startDetailedAddress"
          class="bg-right start-address"
        >
          <el-input
            v-model="deptBudgetList.startDetailedAddress"
            placeholder="请输入始发地详细地址"
            maxlength="20"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="收获库点"
          span="1"
          prop="contractNo"
          class="start-address"
        >
          <el-select
            v-model="deptBudgetList.receiveWarehouse"
            :disabled="warehouse"
            placeholder="收货苦点"
            class="typeselect"
          >
            <el-option
              v-for="item in warehouseList"
              :key="item.constKey"
              :label="item.warehouseName"
              :value="item.warehouseName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="终到地"
          span="1"
          prop="contractNo"
          class="start-address"
        >
          <el-cascader
            :options="options_"
            v-model="selectedOptions1"
            clearable
            size="large"
            placeholder="请选择终到地"
            style="width: 200%"
            @change="handleChange1"
          />
        </el-form-item>
        <el-form-item
          label="终到地详细地址"
          span="1"
          prop="endDetailedAddress"
          class="bg-right start-address"
        >
          <el-input
            v-model="deptBudgetList.endDetailedAddress"
            placeholder="请输入终到地详细地址"
            maxlength="20"
            size="small"
          ></el-input>
        </el-form-item>
        <div>
          <span class="check-box">运输方式</span>
          <el-checkbox-group v-model="checkList" prop="tranType">
            <el-checkbox label="汽运"></el-checkbox>
            <el-checkbox label="火运"></el-checkbox>
            <el-checkbox label="船运"></el-checkbox>
          </el-checkbox-group>
        </div>
      </ws-info-table>

      <div
        style="width: 100%"
        class="position"
        v-for="(item, index) in deptBudgetList.tranProcessInfoList"
      >
        <div class="driver">
          运输阶段{{ index + 1 }} {{ item.processNo }}
          <img
            width="22"
            height="22"
            class="add"
            @click="add"
            src="../../../public/img/add.png"
            alt=""
          />
          <img
            width="22"
            height="22"
            class="del"
            @click="del(index)"
            src="../../../public/img/del.png"
            alt=""
          />
        </div>
        <ws-info-table>
          <el-form-item label="运输方式" span="1" prop="waterContent">
            <el-select
              v-model="item.tranType"
              placeholder="运输方式"
              class="typeselect"
              @change="
                (val) => {
                  selecttaskwayList(val, index)
                }
              "
            >
              <el-option
                v-for="item in taskwayList"
                :key="item.constKey"
                :label="item.constValue"
                :value="item.constValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发货日期" span="1" prop="impurity">
            <ws-date-picker
              v-model="item.deliveryDateStart"
              type="date"
              placeholder="请选择发货日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="最晚到货日期" span="1" prop="bulkDensity">
            <ws-date-picker
              v-model="item.deliveryDateEnd"
              type="date"
              placeholder="请选择最晚到货日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item
            label="本阶段运输重量（吨）"
            span="1"
            prop="bulkDensity"
          >
            <el-input
              v-model="item.weight"
              placeholder="请输入本阶段运输重量"
              size="small"
            ></el-input>
          </el-form-item>
        </ws-info-table>
        <ws-info-table>
          <el-form-item label="发货地区" span="1" prop="waterContent">
            <el-cascader
              :options="options_"
              v-model="item.selectedOptions"
              clearable
              size="large"
              placeholder="请选择发货地区"
              style="width: 200%"
              @change="
                (val) => {
                  handleChange3(val, index)
                }
              "
            />
          </el-form-item>
          <el-form-item label="发货地详细地址" span="1" prop="impurity">
            <el-input
              v-model="item.sendDetailedAddress"
              placeholder="请输入发货地详细地址"
              maxlength="20"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="发货人" span="1" prop="bulkDensity">
            <el-input
              v-model="item.sender"
              placeholder="请输入发货人"
              maxlength="20"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="发货人电话" span="1" prop="bulkDensity">
            <el-input
              v-model="item.senderPhone"
              placeholder="请输入发货人电话"
              maxlength="20"
              size="small"
            ></el-input>
          </el-form-item>
        </ws-info-table>
        <ws-info-table>
          <el-form-item label="收货地区" span="1" prop="bulkDensity">
            <el-cascader
              :options="options_"
              v-model="item.selectedOptions1"
              clearable
              size="large"
              placeholder="请选择收货地区"
              style="width: 200%"
              @change="
                (val) => {
                  handleChange4(val, index)
                }
              "
            />
          </el-form-item>
          <el-form-item label="收货地详细地址" span="1" prop="impurity">
            <el-input
              v-model="item.receiveDetailedAddress"
              placeholder="请输入收货地详细地址"
              maxlength="20"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="收货人" span="1" prop="bulkDensity">
            <el-input
              v-model="item.receiver"
              placeholder="请输入收货人"
              maxlength="20"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="收货人电话" span="1" prop="bulkDensity">
            <el-input
              v-model="item.receiverPhone"
              placeholder="请输入收货人电话"
              maxlength="20"
              size="small"
            ></el-input>
          </el-form-item>
        </ws-info-table>
      </div>
    </el-form>
    <!-- 提交 -->
    <div style="text-align: right; padding: 10px" class="center">
      <el-button
        class="bg-bottom"
        type="primary"
        size="small"
        @click="submit(deptBudgetList)"
        >提交</el-button
      >
    </div>
  </div>
</template>
<script>
import { packList } from '@/model/contarct/index'
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
import { addtrantask, getwarehousename, xialaNo } from '@/model/tasksport/index'
import WsUpload from '@/components/WsUpload'
import mapDrag from '@/components/mapdrag/mapdrag'
export default {
  name: 'viewSpareMoney',
  components: {
    WsUpload,
    mapDrag,
  },
  watch: {
    vesselId(val) {
      this.getVesselData()
    },
    isShow(val) {
      this.showType = val
    },
  },
  data() {
    let self = this
    return {
      checkList: [],
      deptBudgetList: {
        taskNo: '',
        totalStorage: 0,
        goodsName: '玉米',
        goodsNameKey: 1,
        warehouseType: '1',
        tranProcessInfoList: [
          {
            processNo: '',
            tranType: '汽运',
            tranTypeKey: '1',
            deliveryDateStart: '',
            deliveryDateEnd: '',
            weight: '13',
            selectedOptions: [],
            selectedOptions1: [],
            sendPrivate: '',
            sendCity: '',
            sendArea: '',
            receivePrivate: '',
            receiveCity: '',
            receiveArea: '',
            sendDetailedAddress: '',
            receiveDetailedAddress: '',
            sender: '',
            receiver: '',
            senderPhone: '',
            receiverPhone: '',
          },
        ],
      },
      radio: '1',
      options_: regionData,
      heightData: '600px',
      zoom: 7,
      selectedOptions: [],
      selectedOptions1: [],
      window: '',
      district: null,
      goodnameList: [],
      listDate: { country: '中国', level: 'country', city: '' },
      citylist: [],
      taskType: [],
      taskwayList: [],
      contractNoList: [],
      compId: sessionStorage.getItem('ws-pf_compId'),
      mainReportAdd: {},
      appendixIdsAdd: '',
      warehouseList: [],
      size: 10,
      value1: '',
      unitList: [],
      name: '',
      age: '',
    }
  },
  activated() {
    this.loaddata()
    this.showType = this.isShow
  },
  computed: {
    warehouse: function () {
      if (
        this.deptBudgetList.taskType == '销售出库' ||
        this.deptBudgetList.taskType == '贸易服务出库' ||
        this.deptBudgetList.taskType == '暂存出库'
      ) {
        return true
      } else {
        return false
      }
    },
  },
  methods: {
    // 获取当前年月日
    getdate() {
      var date = new Date()
      var year = date.getFullYear() //获取完整的年份(4位)
      var mouth = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
      var datetime = date.getDate() //获取当前日(1-31)
      if (mouth < 10) {
        mouth = '0' + mouth
      }
      if (datetime < 10) {
        datetime = '0' + datetime
      }
      return year + mouth + datetime
    },
    // 随机验证码
    verifyinit() {
      var arr = []
      for (var i = 48; i < 123; i++) {
        if (i > 57 && i < 65) continue
        if (i > 90 && i < 97) continue
        arr.push(String.fromCharCode(i))
      }
      arr.sort(function () {
        return Math.random() - 0.5
      })
      arr.length = 4

      return arr.join('')
    },
    loaddata() {
      this.deptBudgetList.taskNo = 'YS' + this.getdate() + this.verifyinit()
      // 货名
      packList({ constId: 'CON2' })
        .toPromise()
        .then((response) => {
          this.goodnameList = response
        })
      // 任务类型
      packList({ constId: 'TRAN3' })
        .toPromise()
        .then((response) => {
          this.taskType = response
        })
      // 运输方式
      packList({ constId: 'TRAN6' })
        .toPromise()
        .then((response) => {
          this.taskwayList = response
        })

      getwarehousename({
        compId: this.compId,
        warehouseType: this.deptBudgetList.warehouseType,
      })
        .toPromise()
        .then((response) => {
          this.warehouseList = response
        })
      xialaNo({
        compId: this.compId,
      })
        .toPromise()
        .then((response) => {
          this.contractNoList = response
        })
      // // 车型
      // packList({ constId: 'TRAN1' })
      //   .toPromise()
      //   .then((response) => {
      //     this.carModelList = response
      //   })
      // // 车长
      // packList({ constId: 'TRAN2' })
      //   .toPromise()
      //   .then((response) => {
      //     this.carLengthList = response
      //   })
    },
    confirmPositioncity() {
      this.listDate.level = 'city'
      this.listDate.country = this.name
    },
    // 关闭 dialog时 处理文件url 初始化upload组件
    handleClose() {
      this.dialogViewSpareMoney = false
    },
    add() {
      this.deptBudgetList.tranProcessInfoList.push({
        tranType: '汽运',
        tranTypeKey: '1',
        deliveryDateStart: '',
        deliveryDateEnd: '',
        weight: '13',
        selectedOptions: [],
        selectedOptions1: [],
        sendPrivate: '',
        sendCity: '',
        sendArea: '',
        receivePrivate: '',
        receiveCity: '',
        receiveArea: '',
        sendDetailedAddress: '',
        receiveDetailedAddress: '',
        sender: '',
        receiver: '',
        senderPhone: '',
        receiverPhone: '',
      })
    },
    del(index) {
      if (this.deptBudgetList.tranProcessInfoList.length > 1) {
        this.deptBudgetList.tranProcessInfoList.splice(index, 1)
      }
    },
    handleChange(value) {
      this.selectedOptions = value
      this.deptBudgetList.startPrivate = CodeToText[value[0]]
      this.deptBudgetList.startCity = CodeToText[value[1]]
      this.deptBudgetList.startArea = CodeToText[value[2]]
    },
    handleChange1(value) {
      this.selectedOptions1 = value
      this.deptBudgetList.endPrivate = CodeToText[value[0]]
      this.deptBudgetList.endCity = CodeToText[value[1]]
      this.deptBudgetList.endArea = CodeToText[value[2]]
    },
    handleChange3(value, index) {
      this.deptBudgetList.tranProcessInfoList[index].sendPrivate =
        CodeToText[value[0]]
      this.deptBudgetList.tranProcessInfoList[index].sendCity =
        CodeToText[value[1]]
      this.deptBudgetList.tranProcessInfoList[index].sendArea =
        CodeToText[value[2]]
    },
    handleChange4(value, index) {
      this.deptBudgetList.tranProcessInfoList[index].receivePrivate =
        CodeToText[value[0]]
      this.deptBudgetList.tranProcessInfoList[index].receiveCity =
        CodeToText[value[1]]
      this.deptBudgetList.tranProcessInfoList[index].receiveArea =
        CodeToText[value[2]]
    },
    returnsales() {
      this.$router.push({ path: 'tranManagementTransport' })
    },
    selecttaskType(e) {
      for (var i = 0; i < this.taskType.length; i++) {
        if (this.taskType[i].constValue == e) {
          this.deptBudgetList.taskTypeKey = this.taskType[i].constKey
        }
      }
    },
    selecttaskwayList(e, index) {
      for (var i = 0; i < this.taskwayList.length; i++) {
        if (this.taskwayList[i].constValue == e) {
          this.deptBudgetList.tranProcessInfoList[index].tranTypeKey =
            this.taskwayList[i].constKey
        }
      }
    },
    selectgoodsname(e) {
      for (var i = 0; i < this.goodnameList.length; i++) {
        if (this.goodnameList[i].constValue == e) {
          this.deptBudgetList.goodsNameKey = this.goodnameList[i].constKey
        }
      }
    },
    onChange(files) {
      this.fileNum = files
      this.$refs.upload.handleSaveBill().then((res) => {
        console.log(files)
      })
    },

    submit() {
      this.$refs.deptBudgetList.validate((valid) => {
        if (valid) {
          for (
            var i = 0;
            i < this.deptBudgetList.tranProcessInfoList.length;
            i++
          ) {
            this.deptBudgetList.tranProcessInfoList[i].processNo =
              this.deptBudgetList.taskNo + (i + 1)
          }
          this.deptBudgetList.compId = sessionStorage.getItem('ws-pf_compId')
          this.deptBudgetList.tranType = this.checkList.toString()
          addtrantask(this.deptBudgetList)
            .toPromise()
            .then((response) => {
              this.$message.success('添加成功')
              this.deptBudgetList = {
                taskNo: '',
                totalStorage: 0,
                goodsName: '玉米',
                goodsNameKey: 1,
                warehouseType: '1',
                tranProcessInfoList: [
                  {
                    processNo: '',
                    tranType: '汽运',
                    deliveryDateStart: '',
                    deliveryDateEnd: '',
                    weight: '13',
                    selectedOptions: [],
                    selectedOptions1: [],
                    sendPrivate: '',
                    sendCity: '',
                    sendArea: '',
                    receivePrivate: '',
                    receiveCity: '',
                    receiveArea: '',
                    sendDetailedAddress: '',
                    receiveDetailedAddress: '',
                    sender: '',
                    receiver: '',
                    senderPhone: '',
                    receiverPhone: '',
                  },
                ],
              }
              this.$router.push({ path: 'tranManagementTransport' })
            })
        } else {
          EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
          return false
        }
      })
    },
    resetForm(deptBudgetList) {
      this.$refs[deptBudgetList].resetFields()
    },
  },
}
</script>

<style lang="scss" scoped>
.position {
  position: relative;
}
.del,
.add {
  cursor: pointer;
}
.el-checkbox-group {
  font-size: 0;
  float: right;
}
.check-box[data-v-5c5ac25d] {
  float: left;
}
.el-form {
  padding: 0 10%;
}
.ws-info-table {
  border: none;
}
/deep/.ws-info-table .el-form-item {
  border-right: 1px solid #cdd2dc;
  border-bottom: 1px solid #cdd2dc;
}
.readonly {
  position: relative;
}
.title {
  position: relative;
}
.title::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 30px;
  background: #5473e8;
  position: absolute;
  left: 0;
}
//去边框
/deep/.el-form-item {
  border-right: 0px;
  border-bottom: 0px;
}
.el-form {
  margin-top: 50px;
}
.el-form-item.start-address.el-form-item--small {
  width: 33.3%;
}
.el-col {
  background: #f6f7fc;
}
// /deep/.ws-info-table .el-form-item .el-form-item__content {
//   padding: 0 25px;
//   border-left: 1px solid #cdd2dc;
//   background: #fafbfc;
// }
// /deep/.ws-info-table .el-form-item .el-form-item__label {
//   width: 140px;
//   text-align: center;
//   background: #f0f2f6;
//   // border: 1px solid #cdd2dc;
// }
// .button-container {
//   display: flex;
//   flex-wrap: nowrap;
//   justify-content: space-between;
//   align-items: center;
//   background-color: #fff;
//   width: 100%;
//   height: 50px;
//   padding: 0 10px;
//   & > div {
//     margin-left: 10px;
//     display: flex;
//     flex-wrap: nowrap;
//     flex-direction: row;
//     & > span {
//       line-height: 50px;
//     }
//   }

//   /deep/.auditFlow-box {
//     position: unset;
//     margin-left: 10px;
//     &/deep/.auditFlow-icon {
//       width: auto;
//       padding-right: 30px;
//     }
//     &/deep/.auditFlow-main {
//       position: absolute;
//     }
//   }
// }
// .box-app {
//   display: inline-block;
//   float: left;
//   margin-left: 30px;
//   line-height: 50px;
// }
// /deep/.el-dialog {
//   .el-form-item {
//     margin-bottom: 0 !important;
//     .el-input--medium {
//       textarea {
//         min-height: 100px !important;
//       }
//     }
//   }
// }
// .collapse-bottom {
//   margin-bottom: 20px;
// }
// .input-main .textarea .el-textarea__inner {
//   width: 100%;
//   z-index: 1;
// }
.bg-left {
  padding-left: 30px;
}
.bg-right {
  padding-right: 10px;
  text-align: right;
}
.bg-bottom {
  margin: 15px 0px;
}
.el-radio,
.el-radio__input {
  margin-top: 11px;
  margin-left: 11px;
  width: 93px;
}
// .wenzi {
//   width: 900px;
//   margin: 0 auto;
// }
// .wenzi h3 {
//   display: inline-block;
//   left: 10px;
// }
// .wenzi p {
//   display: inline-block;
// }
// .center {
//   width: 900px;
//   margin: 0 auto;
// }
// .el-form-item__label {
//   text-align: center;
// }
// .el-table {
//   width: 1240px;
// }
// .ce {
//   width: 900px;
//   margin: 0 auto;
// }
// .driver {
//   width: 120px;
//   margin-top: 10px;
//   font-weight: bold;
// }

// // 控制select为只读的时候显示样式
// /deep/.ws-class-table-col {
//   height: auto;
//   padding: 0px 2px;
//   /deep/.el-input__inner {
//     padding: 0px 2px;
//   }
// }
// .winseaview-view {
//   padding: 0 0 20px;
// }
// .container {
//   overflow: scroll;
//   height: 93vh;
// }
// /deep/.ws-info-table .el-form-item .el-form-item__label {
//   width: 80px;
// }
/deep/.ws-info-table .el-form-item {
  width: 20%;
}
// .el-textarea__inner {
//   display: none;
// }
// .el-form {
//   margin-top: 50px;
// }
// .readonly {
//   width: 16%;
// }
// .el-cascader {
//   width: 145px;
// }
// .forlist {
//   width: 20%;
// }
// .el-form-item.forlist.is-success.el-form-item--small {
//   width: 20%;
// }
// .el-form-item.forlist.el-form-item--small {
//   width: 20%;
// }
// .el-form-item.readonly.is-success.el-form-item--small.showLableToopTip {
//   width: 20%;
// }
// .el-form-item.el-car.el-form-item--small {
//   width: 33.3%;
// }
// .el-checkbox-group{
//   margin-left: 240px;
//     margin-top: -17px;
// }
// /deep/.neifor {
//   .ws-info-table {
//     border: none;
//   }
//   .el-form-item {
//     // width: 33.3333%;
//     border: none;
//     .el-form-item__label {
//       background: transparent;
//       border: none;
//     }
//     .el-form-item__content {
//       border: none;
//     }
//   }
// }
/deep/.nei {
  .ws-info-table {
    border: none;
  }
  .el-form-item {
    width: 33.3333%;
    border: none;
    .el-form-item__label {
      background: transparent;
      border: none;
    }
    .el-form-item__content {
      border: none;
    }
  }
}
// .ws-info-table .el-form-item .el-form-item__label {
//     width: min-content;
// }
// .el-select>.el-input {
//     display: block;
//     width: 190px;
// }
// .ws-info-table .el-form-item {
//     width: 20%;
//     border: none;
//     background: transparent;
// }
</style>