<template>
  <div>
    <el-collapse :value="activeNames">
      <el-collapse-item title="车辆信息" name="5" >
        <el-row>
        <el-select v-model="selectedVehicle" value-key="vehicleNo" placeholder="请选择车辆" filterable @focus="handleSelectClick">
          <el-option
            v-for="item in vehicleList"
            :key="item.vehicleNo"
            :value="item"
            :label="item.vehicleNo + ' - ' + item.driver"
          ></el-option>
        </el-select>
        <el-button style="margin-left: 10px;"  type="primary" @click="handleAddCar">添加</el-button>
        <el-button  type="primary" @click="handleDelCar">移除</el-button>
        <!-- <el-button v-auth="50300030101" type="primary" @click="handleAllSave">保存</el-button> -->
      </el-row>
        <el-table :data="carList" ref="table" border @selection-change="handleSelect"  class="row-mrg-t">
          <table-column type="selection" fixed align="center"></table-column>
          <table-column label="车牌号">
            <template slot-scope="scope">
              <el-input v-if="scope.row.isSet" v-model="scope.row.vehicleNo"></el-input>
              <span v-else>{{scope.row.vehicleNo}}</span>
            </template>
          </table-column>
          <table-column label="车型">
            <template slot-scope="scope">
              <el-input v-if="scope.row.isSet" v-model="scope.row.vehicleType"></el-input>
              <span v-else>{{scope.row.vehicleType}}</span>
            </template>
          </table-column>
          <table-column label="驾驶员">
            <template slot-scope="scope">
              <el-input v-if="scope.row.isSet" v-model="scope.row.driver"></el-input>
              <span v-else>{{scope.row.driver}}</span>
            </template>
          </table-column>
          <table-column label="身份证号 ">
            <template slot-scope="scope">
              <el-input v-if="scope.row.isSet" v-model="scope.row.driverIdentity"></el-input>
              <span v-else>{{scope.row.driverIdentity}}</span>
            </template>
          </table-column>
          <table-column label="联系电话">
            <template slot-scope="scope">
              <el-input v-if="scope.row.isSet" v-model="scope.row.driverTel"></el-input>
              <span v-else>{{scope.row.driverTel}}</span>
            </template>
          </table-column>
          <table-column label="温度要求">
            <template slot-scope="scope">
              <el-input v-if="scope.row.isSet" v-model="scope.row.tempRequirement"></el-input>
              <span v-else>{{scope.row.tempRequirement}}</span>
            </template>
          </table-column>
          <table-column label="车辆温度">
            <template slot-scope="scope">
              <el-input v-if="scope.row.isSet" v-model="scope.row.vehicleTemp"></el-input>
              <span v-else>{{scope.row.vehicleTemp}}</span>
            </template>
          </table-column>
          <table-column label="是否复冻">
            <template slot-scope="scope">
              <el-select v-if="scope.row.isSet" v-model="scope.row.isRefreeze">
                <el-option label="是" value="Y"></el-option>
                <el-option label="否" value="N"></el-option>
              </el-select>
              <span
                v-else
              >{{ $utils.keyMatcher(scope.row.isRefreeze, $keys.stockIn.isRefreeze).name }}</span>
            </template>
          </table-column>
          <table-column label="备注" width="230">
            <template slot-scope="scope">
              <el-input v-if="scope.row.isSet" v-model="scope.row.remark"></el-input>
              <span v-else>{{scope.row.remark}}</span>
            </template>
          </table-column>
          <table-column label="开始卸货时间" width="150">
            <template slot-scope="scope">
              <el-date-picker
                v-if="scope.row.isSet"
                v-model="scope.row.fmEtcd"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd 00:00:00"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
              <span v-else>{{scope.row.fmEtcd}}</span>
            </template>
          </table-column>
          <table-column label="结束卸货时间" width="150">
            <template slot-scope="scope">
              <el-date-picker
                v-if="scope.row.isSet"
                v-model="scope.row.toEtcd"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd 23:59:00"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
              <span v-else>{{scope.row.toEtcd}}</span>
            </template>
          </table-column>
          <table-column label="操作" width="100" fixed="right">
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.isSet?'保存':'编辑'" placement="top">
                <el-button
                  size="mini"
                  type="primary"
                  :icon="scope.row.isSet ?'el-icon-check':'el-icon-edit'"
                  plain
                  circle
                  @click="handleSave(scope.$index, scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  plain
                  circle
                  @click="handleDelete(scope.$index, scope.row)"
                ></el-button>
              </el-tooltip>
            </template>
          </table-column>
        </el-table>
        <div class="mrg-t">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
export default {
  name: 'Car',
  data () {
    return {
      carList: [],
      vehicleList: [], // 所有车辆列表
      selectedVehicle: {}, // 选择的车辆,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      removeUrl: '',
      removeList: [],
      vehicleNoList: []
    }
  },
  props: {
    // carList: Array,
    getUrl: String,
    saveUrl: String,
    // removeUrl: String,
    activeNames: Array,
    No: String,
    NoKey: String,
    businessType: String,
    mode: String
  },
  created () {
    this.getList()
  },
  mounted () {
    this.count()
  },
  methods: {

    getList () {
      // if (this.total > this.pageSize) this.pageSize += this.pageSize
      const url = this.getUrl
      const param = { [this.NoKey]: this.No, 'page.currentPage': this.currentPage, 'page.limitCount': this.pageSize }
      this.$https.post(url, param).then(res => {
        let carList = res.rows || []
        carList.map(item => {
          return (item['isSet'] = false)
        })
        // console.log(carList)
        this.carList = carList
        this.currentPage = res.currentPage
        this.total = res.total
      })
    },

    // 获取车辆列表不分页
    getVehicleList () {
      const url = this.$API.warehouseBasic.vehicle.getAllList
      this.$https.post(url, { businessType: this.businessType })
        .then(data => {
          this.vehicleList = data.data
        })
    },
    handleSelectClick () {
      this.getVehicleList() // 获取车辆列表
    },
    // 车辆信息添加行
    handleAddCar () {
      if (!this.selectedVehicle.vehicleNo) return this.$message.warning('请先选择车辆')

      const isAddConditions = [...this.carList].some(item => {
        return item.vehicleNo === this.selectedVehicle.vehicleNo
      })
      if (isAddConditions) {
        return this.$message.warning('不能添加相同车牌号')
      }
      for (let i of this.carList) {
        if (i.isSet) return this.$message.warning('请先保存当前编辑项')
      }
      const list = {
        vehicleNo: '',
        vehicleType: '',
        driver: '',
        driverIdentity: '',
        driverTel: '',
        tempRequirement: '',
        vehicleTemp: '',
        isRefreeze: '',
        fmEtcd: '',
        toEtcd: '',
        remark: '',
        isSet: false,
        isChecked: false,
        ...this.selectedVehicle,
      }
      if (this.mode === 'edit' || this.mode === 'detail') {
        this.handleAllSave(this.selectedVehicle)
        return false
      }
      this.carList.unshift(list)
      this.$emit('getChangeCarList', this.carList)
    },
    // 单行保存
    handleSave (index, row) {
      if (row.isSet) {
        row.isSet = false
        this.selectedVehicle = {} // 保存时清空已选车辆
        if (!(this.mode === 'edit' || this.mode === 'detail')) {
          this.$emit('getChangeCarList', this.carList)
          return false
        }
        this.handleAllSave(row)
      } else {
        row.isSet = !row.isSet
      }
    },
    // 保存所有
    handleAllSave (row) {
      const url = this.saveUrl
      const param = { [this.NoKey]: this.No, carriers: JSON.stringify([row]) }
      this.$https.post(url, param).then(res => {
        this.getList()
      })
    },

    count () {
      if (this.businessType === 'RECEIVE') {
        this.removeUrl = '/inb_web/inbweb/inboundAsnController/removeCarrier.shtml'
      } else {
        this.removeUrl = '/oub_web/oubweb/outboundSoController/removeCarrier.shtml'
      }
    },

    // 删除多行
    handleDelCar () {
      if (!(this.mode === 'edit' || this.mode === 'detail')) {
        this.carList = this.carList.filter((item, index) => {
          return item.vehicleNo !== this.vehicleNoList[index]
        })
        this.$emit('getChangeCarList', this.carList)
        return false
      }
      const url = this.removeUrl
      const param = { jobIds: JSON.stringify(this.removeList) }
      this.$https.post(url, param).then(res => {
        this.getList()
      })
    },
    // 删除当前行
    handleDelete (index, row) {
      if (!(this.mode === 'edit' || this.mode === 'detail')) {
        this.carList = this.carList.filter(item => {
          return item.vehicleNo !== row.vehicleNo
        })
        this.$emit('getChangeCarList', this.carList)
        return false
      }
      const url = this.removeUrl
      const param = { jobIds: JSON.stringify([row.jobId]) }
      this.$https.post(url, param).then(res => {
        this.getList()
      })
    },
    // 勾选checkbox
    handleSelect (selection) {
      this.removeList = selection.map(item => item.jobId)
      this.vehicleNoList = selection.map(item => item.vehicleNo)
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.getList()
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.getList()
    }
  },

}
</script>
