<template>
  <div class="app-container">
    <div v-show="viewState == 1">
      <button-bar view-title="存放地点变更申请" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
      <div class="main-content">
        <div class="searchcon">
          <el-button size="small" class="searchbtn" @click="isSearchShow = !isSearchShow">
            {{ isSearchShow ? '隐藏查询条件' : '显示查询条件' }}
          </el-button> <!--:model="listQuery"-->
          <div v-show="isSearchShow" class="search">
            <el-form :inline="true" class="tab-header">
              <el-form-item label="申请日期">
                <el-date-picker
                  v-model="listQuery.params.applyDateStart"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
                <span style="padding: 0 8px">至</span>
                <el-date-picker
                  v-model="listQuery.params.applyDateEnd"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="车架号">
                <el-input v-model="listQuery.params.vin" placeholder="请输入名称" clearable/>
              </el-form-item>
            </el-form>
            <div class="btn" style="text-align: center;">
              <el-button type="primary" @click="getList">查询</el-button>
              <el-button type="primary" @click="resetQuery">重置</el-button>
            </div>
          </div>
        </div>
        <!--Start 项目列表头部-->
        <div class="listtop">
          <div class="tit">存放地点变更申请列表</div>
          <pageye v-show="dataList.length > 0" :total="listQuery.total" :page.sync="listQuery.current"
                  :limit.sync="listQuery.size" class="pagination" @pagination="loadList"/>
        </div>
        <!--End 项目列表头部-->
        <!--Start 项目列表-->
        <div class="">
          <el-table v-loading="tableLoading" :data="dataList" border style="width: 100%"
                    @selection-change="handleSelectionChange">
            <el-table-column width="50px" type="selection" align="center"/>
            <el-table-column width="80px" fixed label="序号" type="index" :index="indexMethod" align="center"/>
            <el-table-column label="操作" fixed align="center" width="160px" class-name="small-padding fixed-width">
              <template slot-scope="{row}"><!-- row.state !== '待提交' || '移库申请' -->
                <el-button size="mini" type="primary"
                           :disabled="row.state == '待提交' ? false:row.state == '移库申请'?false : true"
                           @click="handleEdit(row)">办理
                </el-button>
                <el-button size="mini" type="primary" @click="handleCheck(row)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column width="120px" prop="state" label="状态" header-align="center" align="left"/>
            <el-table-column width="160px" prop="applyId" label="申请编号" align="center"/>
            <el-table-column width="140px" prop="applyDate" label="申请日期" align="center"/>
            <el-table-column width="130px" prop="applyName" label="申请人" align="center"/>
            <el-table-column width="180px" prop="vin" label="车架号" align="center"/>
            <el-table-column width="160px" prop="location" label="现存放地点" align="center"/>
            <el-table-column width="160px" prop="targetLocation" label="目标存放地点" align="center"/>
            <el-table-column width="130px" prop="operator" label="移库操作人" align="center"/>
            <el-table-column width="160px" prop="applyPrice" label="申请费用" align="center"/>
            <el-table-column width="180px" label="现场照片" align="center">
              <template slot-scope="{row}"> <!-- row.state == '已办结' -->
                <div class="upload_img" v-show="row.state == '已办结' && row.images.length < 1">
                  <upload ref="uploadMoreImg" v-model="imgList" bucket="map" @eett="getList"
                          :upload-data="{type:'0001',sid: row.sid}"/>
                </div>
                <!--                <el-button size="mini" type="primary" @click="handleUpload(row)">上传</el-button>-->
                <el-button size="mini" type="primary" @click="handleCheckImg(row)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column width="120px" label="临时出门证" align="center">
              <template slot-scope="{row}"> <!-- row.state == '已办结' -->
                <el-button v-show="row.state == '已办结'" size="mini" type="primary" @click="handleExitPermit(row)">出门证
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--End 项目列表-->
        <div class="pages">
          <div class="tit"/>
          <!-- 翻页 -->
          <pagination
            v-show="dataList.length > 0"
            :total="listQuery.total"
            :page.sync="listQuery.current"
            :limit.sync="listQuery.size"
            class="pagination"
            @pagination="loadList"
          />
        </div>
      </div>
    </div>
    <!-- 照片弹窗 -->
    <el-dialog :visible.sync="dialogImgVisible" width="1000px"
               :close-on-click-modal="false">
      <div class="result-cont">
        <el-carousel indicator-position="outside" style="height: 500px;">
          <el-carousel-item v-for="item in srcList" :key="item" style="height: 500px;">
            <img style="width: 100%; height: 500px;" :src="item">
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-dialog>
    <!-- 临时出门证 -->
    <el-dialog :visible.sync="isExitPermit" :title="formList.orgName + '出门证'" center width="1000px"
               :close-on-click-modal="false">
      <el-form ref="dataForm" :model="formList" label-position="right" class="formadd">
        <el-row class="dialogRow">
          <el-col :span="3">
            <span>日期:</span>
          </el-col>
          <el-col :span="9">
            <el-form-item>
              <span>{{ formList.date }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <span>合同编号:</span>
          </el-col>
          <el-col :span="9">
            <el-form-item>
              <span>{{ formList.contractNo }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <span>客户名称</span>
          </el-col>
          <el-col :span="21">
            <el-form-item>
              <span>{{ formList.customerName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <span>车型名称</span>
          </el-col>
          <el-col :span="9">
            <el-form-item>
              <span>{{ formList.modelName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <span>台数</span>
          </el-col>
          <el-col :span="9">
            <el-form-item>
              <span>{{ formList.num }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <span>车架号</span>
          </el-col>
          <el-col :span="21">
            <el-form-item>
              <span>{{formList.vinNo}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <span>出门原因</span>
          </el-col>
          <el-col :span="21">
            <el-form-item>
              <span>{{ formList.reason }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3"> <!--<span class="icon">*</span>-->
            <span>业务经办人</span>
          </el-col>
          <el-col :span="9">
            <el-form-item>
              <span>{{formList.creatName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <span>财务经办人</span>
          </el-col>
          <el-col :span="9">
            <el-form-item>
              <span></span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3"> <!--<span class="icon">*</span>-->
            <span>提车人</span>
          </el-col>
          <el-col :span="9">
            <el-form-item>
              <span>{{ formList.carryCarName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <span>出门签章</span>
          </el-col>
          <el-col :span="9">
            <el-form-item>
              <span></span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <!--    <el-dialog title="查看" :visible.sync="dialogImgVisible">-->
    <!--      <el-image v-for="item in srcList" :key="item" style="width: 100px; height: 100px" :src="item"-->
    <!--                :preview-src-list="srcList"/>-->
    <!--    </el-dialog>-->
    <cunfangdidianbiangeng-add v-show="viewState == 2 || viewState == 3" ref="divadd" @doback="resetState"
                               @reloadlist="getList"/>
    <cunfangdidianbiangeng-info v-show="viewState == 4" ref="divinfo" @doback="resetState"/>
  </div>
</template>

<script>
import { deleteCarTransfer, selectCarTransferList, temporaryExitPermitInfo } from '@/api/supplychain/cunfangdidianbiangeng'
import { getUseOrgByUserSid, selectModelName } from '@/api/cheliang/basevehicle'
import ButtonBar from '@/components/ButtonBar'
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import cunfangdidianbiangengAdd from '@/views/supplychain/cunfangdidianbiangeng/cunfangdidianbiangengAdd'
import cunfangdidianbiangengInfo from '@/views/supplychain/cunfangdidianbiangeng/cunfangdidianbiangengInfo'
import upload from '../../../components/uploadFile/upload_cunfang'

export default {
  name: 'cunfangdidianbiangeng',
  components: {
    ButtonBar,
    Pagination,
    pageye,
    cunfangdidianbiangengAdd,
    cunfangdidianbiangengInfo,
    upload

  },
  data() {
    return {
      btndisabled: false,
      viewState: 1, // 1、列表 2、添加 3、修改 4、查看
      isSearchShow: false,
      tableLoading: false,
      dialogImgVisible: false,
      isExitPermit: false,
      srcList: [],
      imgList: [],
      multipleSelection: [],
      sids: [],
      dataList: [],
      useOrg_list: [],
      modelName_list: [],
      slowMachine_list: [],
      useOrg: '', // 使用组织
      useOrgSid: '', // 使用组织sid
      formList: {},
      listQuery: {
        current: 1,
        size: 10,
        total: 0,
        params: {
          applyDateStart: '',
          applyDateEnd: '',
          vin: '',
          userSid: window.sessionStorage.getItem('userSid')
        }
      },
      btnList: [
        {
          type: 'primary',
          size: 'small',
          icon: 'plus',
          btnKey: 'toAdd',
          btnLabel: '新增'
        },
        {
          type: 'primary',
          size: 'small',
          icon: 'submit',
          btnKey: 'doSubmit',
          btnLabel: '提交'
        },
        {
          type: 'danger',
          size: 'small',
          icon: 'del',
          btnKey: 'doDel',
          btnLabel: '删除'
        },
        // {
        //   type: 'info',
        //   size: 'small',
        //   icon: 'cross',
        //   btnKey: 'doClose',
        //   btnLabel: '关闭'
        // }
      ]
    }
  },
  created() {
    this.getList()
    // this.getUseOrg()
    this.getModelName()
  },
  mounted() {
    this.$refs['btnbar'].setButtonList(this.btnList)
  },
  methods: {
    resetState() {
      this.viewState = 1
    },
    btnHandle(btnKey) {
      console.log('XXXXXXXXXXXXXXX    ' + btnKey)
      switch (btnKey) {
        case 'toAdd':
          this.toAdd()
          break
        case 'doSubmit':
          this.doSubmit()
          break
        case 'doDel':
          this.doDel()
          break
        default:
          break
      }
    },
    toAdd() {
      this.viewState = 2
      this.$refs['divadd'].showAdd()
    },
    toEdit() {
      if (this.multipleSelection.length === 0) {
        this.$message({ showClose: true, type: 'error', message: '请选择一条记录进行编辑' })
        return
      }
      if (this.multipleSelection.length > 1) {
        this.$message({ showClose: true, type: 'error', message: '只能选择一条记录进行编辑' })
        return
      }
      this.viewState = 3
      this.$refs['divadd'].showEdit(this.sids[0])
    },
    doDel() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          showClose: true, type: 'error', message: '请选择至少一条记录进行删除操作'
        })
        return
      }
      const _this = this
      const tip = '请确认是否删除所选 ' + this.multipleSelection.length + ' 条记录?'
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        // const sids = this.sids.join()
        deleteCarTransfer(this.sids).then(resp => {
          if (resp.success) {
            loading.close()
            _this.$message({ type: 'success', message: resp.msg, showClose: true })
            _this.loadList()
          }else {
            loading.close()
          }
        }).catch(e => {
          loading.close()
        })
      }).catch(() => {
        loading.close()
      })
    },
    handleEdit(row) {
      this.viewState = 3
      this.$refs['divadd'].showEdit(row.sid)
    },
    handleCheck(row) {
      console.log('详情回显', row)
      this.viewState = 4
      this.$refs['divinfo'].showInfo(row)
    },
    getList() {
      this.listQuery.current = 1
      this.loadList()
    },
    resetQuery() {
      this.listQuery = {
        current: 1,
        size: 10,
        total: 0,
        params: {
          applyDateStart: '',
          applyDateEnd: '',
          vin: '',
          userSid: window.sessionStorage.getItem('userSid')
        }
      }
      this.getList()
    },
    loadList() {
      const _this = this
      this.tableLoading = true
      selectCarTransferList(this.listQuery)
        .then(resp => {
          _this.tableLoading = false
          const data = resp.data
          _this.listQuery.total = data.total
          _this.dataList = data.records
        })
        .catch(() => {
          _this.tableLoading = false
        })
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
      const aa = []
      row.forEach((element) => {
        aa.push(element.sid)
      })
      this.sids = aa
      console.log('勾选的数据', this.sids)
    },
    handleUpload() {

    },
    handleCheckImg(row) {
      this.dialogImgVisible = true
      this.srcList = row.images
    },
    // 生成临时出门证
    handleExitPermit(row) {
      this.isExitPermit = true
      this.getExitPermitInfo(row.sid)
    },
    getExitPermitInfo(sid){
      const userSid = window.sessionStorage.getItem('userSid')
      temporaryExitPermitInfo({ sid,userSid }).then((res) => {
        if (res.success){
          this.formList = res.data
        }
      })
    },
    // 车型名称下拉框
    getModelName() {
      selectModelName({ name: '' }).then((response) => {
        if (response.code === '200') {
          this.modelName_list = response.data
        }
      })
    },
    // 根据个人sid查询个人分公司
    getUseOrg() {
      const userSid = window.sessionStorage.getItem('userSid')
      getUseOrgByUserSid({ userSid: userSid }).then((res) => {
        if (res.success) {
          this.useOrg = res.data.name // 使用组织
          this.useOrgSid = res.data.sid // 使用组织sid
          this.listQuery.params.useOrgSid = res.data.sid
          this.loadList()
        }
      })
    },
    // 序号
    indexMethod(index) {
      var pagestart = (this.listQuery.current - 1) * this.listQuery.size
      var pageindex = index + 1 + pagestart
      return pageindex
    },
    doClose() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.searchbtn {
  border: #2cab69 1px solid;
  color: #2cab69;
}

.btn {
  padding: 15px 0 15px 0;
  border: 1px solid #e0e3eb;
  background: white;
}

.tab-header {
  background-color: #edf1f7;
  padding: 8px 20px;
  margin-bottom: 0 !important;
}

.tab-header /deep/ .el-form-item {
  margin-bottom: 10px;
}

.upload_img {
  display: inline-block;
  padding-right: 10px;
}

/deep/ .el-col-3 {
  text-align: right;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px !important;
  font-weight: 600;
}

.formadd {
  padding: 40px 40px 0 40px
}

.dialogRow {
  border-left: 0;
}

.dialogRow /deep/ .el-col {
  border-right: 0;
}
</style>
