<template>
  <div class="app-container">
    <div v-show="viewState == 1">
      <button-bar ref="btnbar" view-title="旧件返厂确认管理" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
      <div class="main-content">
        <div class="searchcon">
          <el-button size="small" class="searchbtn" @click="clicksearchShow">
            {{ searchxianshitit }}
          </el-button>
          <div v-show="isSearchShow" class="search">
            <el-form :inline="true" class="tab-header">
              <el-form-item label="分公司">
                <el-input v-model="queryParams.params.useOrgName" placeholder="" clearable/>
              </el-form-item>
              <el-form-item label="申请部门">
                <el-input v-model="queryParams.params.deptName" placeholder="" clearable/>
              </el-form-item>
              <el-form-item label="申请人">
                <el-input v-model="queryParams.params.createByName" placeholder="" clearable/>
              </el-form-item>
              <el-form-item label="单据编号">
                <el-input v-model="queryParams.params.billNo" placeholder="" clearable/>
              </el-form-item>
              <el-form-item label="单据日期">
                <el-date-picker v-model="queryParams.params.createStartTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 200px;" />
                <span style="padding: 0 8px">至</span>
                <el-date-picker v-model="queryParams.params.createEndTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 200px;" />
              </el-form-item>
              <el-form-item label="办结日期">
                <el-date-picker v-model="queryParams.params.finishStartTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 200px;" />
                <span style="padding: 0 8px">至</span>
                <el-date-picker v-model="queryParams.params.finishEndTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 200px;" />
              </el-form-item>
              <el-form-item label="厂家确认结果">
                <el-select v-model="queryParams.params.confirmResult" placeholder="请选择">
                  <el-option v-for="(item,i) in confirmResultsList" :key="i" :label="item.name" :value="item.sid">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="btn" style="text-align: center;">
              <el-button type="primary" size="small" icon="el-icon-search" @click="dosearch">查询</el-button>
              <el-button type="primary" size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </div>
          </div>
        </div>
        <!-- Start 项目列表头部 -->
        <div class="listtop">
          <div class="tit">旧件返厂确认列表</div>
        </div>
        <!-- End 项目列表头部 -->
        <!-- Start 项目列表 -->
        <div class="">
          <el-table v-loading="tableLoading" :data="dataList" border style="width: 100%" @selection-change="selectionLineChangeHandle">
            <el-table-column fixed width="50" type="selection" align="center"/>
            <el-table-column fixed width="60" label="序号" type="index" :index="indexMethod" align="center"/>
            <el-table-column fixed label="操作" align="center" width="100">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="toRelevancy(scope.row)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="nodeState" label="流程状态" align="center"/>
            <el-table-column prop="billNo" label="单据编号" width="180" align="center"/>
            <el-table-column prop="useOrgName" label="分公司" width="120" align="center"/>
            <el-table-column prop="deptName" label="申请部门" width="120" align="center"/>
            <el-table-column prop="createByName" label="申请人" align="center"/>
            <el-table-column prop="createTime" label="申请日期" align="center"/>
            <el-table-column prop="needReturnCount" label="应返厂数量合计" width="180" align="center"/>
            <el-table-column prop="actualReturnCount" label="实际返厂数量合计" width="180" align="center"/>
            <el-table-column label="附件" align="center" width="100">
              <template slot-scope="scope">
                <div style="color: #1890FF; text-decoration: underline ;" @click="showAdjunct(scope.row.filePaths)">查看
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="confirmCount" label="厂家确认数量" width="180" align="center"/>
          </el-table>
        </div>
        <!-- End 项目列表 -->
        <div class="pages">
          <div class="tit"/>
          <!--  翻页  -->
          <pagination v-show="dataList.length > 0" :total="queryParams.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" class="pagination" @pagination="loadList"/>
        </div>
      </div>
    </div>
    <!-- End 查询和其列表部分 -->
    <!-- 新增修改部分组件 -->
    <divAdd v-show="viewState == 2 || viewState == 3" ref="divadd" @doback="resetState" @reloadlist="loadList"/>
    <divInfo v-show="viewState == 4" ref="divinfo" @doback="resetState" @reloadlist="loadList"/>

    <el-dialog title="附件" :visible.sync="dialogVisible" :before-close="handleClose">
      <el-form ref="dataForm1" class="formadd" style="margin-top: -30px;">
        <el-row class="first_row">
          <el-col :span="24" class="trightb">
            <el-image style="width: 120px;height: 120px; margin: 10px; background: #f0f;" v-for="(item,index) in fileList" :key="index" :src="item" :preview-src-list="[item]">
            </el-image>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import req from '@/api/storage/manufacturerconfirm.js'
import ButtonBar from '@/components/ButtonBar'
import Pagination from '@/components/pagination'
import divAdd from './manufacturerconfirmAdd.vue'
import divInfo from './manufacturerconfirmInfo.vue'

export default {

  components: {
    ButtonBar,
    Pagination,
    divAdd,
    divInfo
  },
  data() {
    return {
      dialogVisible: false,
      fileList: [],
      btndisabled: false,
      viewState: 1, // 1、列表 2、添加 3、修改 4、查看
      isSearchShow: false,
      searchxianshitit: '显示查询条件',
      tableLoading: false,
      dataList: [],
      btnList: [
        {
          type: 'primary',
          size: 'small',
          icon: 'plus',
          btnKey: 'toAdd',
          btnLabel: '厂家确认'
        },

        {
          type: 'info',
          size: 'small',
          icon: 'cross',
          btnKey: 'doClose',
          btnLabel: '关闭'
        }
      ],
      queryParams: {
        current: 1,
        size: 10,
        total: 0,
        params: {
          useOrgName: '',
          deptName: '',
          createByName: '',
          billNo: '',
          createStartTime: '',
          createEndTime: '',
          finishStartTime: '',
          finishEndTime: '',
          confirmResult: '',
          userSid: '',
          orgPath: '',
          menuUrl: ''
        }
      },
      sids: [],
      selectionList: [],
      confirmResultsList: [
        {
          name: '未确认',
          sid: '1'
        },
        {
          name: '已确认',
          sid: '2'
        }
      ]
    }
  },
  mounted() {
    this.$refs['btnbar'].setButtonList(this.btnList)
  },
  created() {
    this.loadList()
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
    },
    showAdjunct(paths) {
      this.fileList = paths
      this.dialogVisible = true
    },
    selectionLineChangeHandle(val) {
      this.selectionList = val
      const aa = []
      val.forEach(element => {
        aa.push(element.sid)
      })
      this.sids = aa
    },
    // 搜索条件效果
    clicksearchShow() {
      this.isSearchShow = !this.isSearchShow
      if (this.isSearchShow) {
        this.searchxianshitit = '隐藏查询条件'
      } else {
        this.searchxianshitit = '显示查询条件'
      }
    },
    btnHandle(btnKey) {
      switch (btnKey) {
        case 'toAdd':
          this.toAdd()
          break
        case 'doClose':
          this.doClose()
          break
        default:
          break
      }
    },
    loadList() {
      this.tableLoading = true
      this.queryParams.params.userSid = window.sessionStorage.getItem('userSid')
      this.queryParams.params.orgPath = window.sessionStorage.getItem('defaultOrgPath')
      this.queryParams.params.menuUrl = this.$route.path
      req.listPage(this.queryParams).then((resp) => {
        this.tableLoading = false
        if (resp.success) {
          const data = resp.data
          this.queryParams.total = data.total
          this.dataList = data.records
        } else {
          // 根据resp.code进行异常情况处理
          this.dataList = []
          this.queryParams.total = 0
        }
      }).catch(() => {
        this.tableLoading = false
      })
    },

    // 序号
    indexMethod(index) {
      var pagestart = (this.queryParams.current - 1) * this.queryParams.size
      var pageindex = index + 1 + pagestart
      return pageindex
    },
    dosearch() {
      this.queryParams.current = 1
      this.loadList()
    },
    resetQuery() {
      this.queryParams = {
        current: 1,
        size: 10,
        total: 0,
        params: {
           useOrgName: '',
           deptName: '',
           createByName: '',
           billNo: '',
           createStartTime: '',
           createEndTime: '',
           finishStartTime: '',
           finishEndTime: '',
           confirmResult: '',
           userSid: '',
           orgPath: '',
           menuUrl: ''
        }
      }
      this.loadList()
    },
    toAdd() {
      if (this.sids.length === 1) {
        this.viewState = 2
        this.$refs['divadd'].showAdd(this.sids[0])
      } else {
        this.$message({
          type: 'warning',
          showClose: true,
          message: '请选择一条记录'
        })
      }
    },
    toEdit(row) {
      this.viewState = 3
      this.$refs['divadd'].showEdit(row)
    },
    doClose() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },
    toRelevancy(row) {
      this.viewState = 4
      this.$refs['divinfo'].showEdit(row)
    },
    resetState() {
      this.viewState = 1
    }
  }
}
</script>
<style scoped>
</style>
