<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-form
          :inline="true"
          class="demo-form-inline"
          label-position="right"
          label-width="80px"
          label-suffix=":"
        >
          <el-form-item label="子卷号">
            <el-input
              v-model="query.container_name"
              size="mini"
              clearable
              placeholder="子卷号"
              @keyup.enter.native="crud.toQuery"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              v-model="query.status"
              clearable
              size="mini"
              placeholder="全部"
              class="filter-item"
              @change="crud.toQuery"
            >
              <el-option label="已完成" value="1" />
              <el-option label="未完成" value="0" />
              <el-option label="移库异常" value="9" />
            </el-select>
          </el-form-item>
          <el-form-item label="移库单据号" label-width="100px">
            <el-input
              v-model="query.move_bill_code"
              size="mini"
              clearable
              placeholder="移库单据号"
              @keyup.enter.native="crud.toQuery"
            />
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="query.createTime"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              @change="crud.toQuery"
            />
          </el-form-item>
          <rrOperation />
        </el-form>
      </div>
      <!--操作栏-->
      <crudOperation :permission="permission" />
      <el-button
        type="success"
        icon="el-icon-check"
        size="mini"
        :disabled="!canOperate"
        @click="handleMarkComplete(crud.selections[0])"
      >
        标记完成
      </el-button>
      <el-button
        type="warning"
        icon="el-icon-refresh"
        size="mini"
        :disabled="!canOperate"
        @click="handleRetryMove(crud.selections[0])"
      >
        重新移库
      </el-button>
      <div style="margin-bottom: 10px"></div>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        size="mini"
        :data="crud.data"
        highlight-current-row
        style="width: 100%;"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column show-overflow-tooltip label="移库单据号" width="150">
          <template slot-scope="scope">
            <span style="color: #f89b0c; font-weight: bold;">{{ scope.row.move_bill_code }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="container_name" label="子卷号" width="180" />
        <el-table-column show-overflow-tooltip prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '1'" type="success" size="mini">已完成</el-tag>
            <el-tag v-else-if="scope.row.status === '0'" type="info" size="mini">未完成</el-tag>
            <el-tag v-else-if="scope.row.status === '9'" type="danger" size="mini">移库异常</el-tag>
            <span v-else>{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="old_level" label="旧级别" width="80" :render-header="renderLevelHeader" />
        <el-table-column show-overflow-tooltip prop="old_result" label="旧处理结果" width="120" />
        <el-table-column show-overflow-tooltip prop="new_level" label="新级别" width="80" :render-header="renderLevelHeader" />
        <el-table-column show-overflow-tooltip prop="new_result" label="新处理结果" width="120" />
        <el-table-column show-overflow-tooltip prop="result_message" label="操作结果" min-width="400" />
        <el-table-column show-overflow-tooltip prop="create_optname" label="创建人" width="100" />
        <el-table-column show-overflow-tooltip prop="create_time" label="创建时间" width="160" />
        <el-table-column show-overflow-tooltip prop="update_optname" label="修改人" width="100" />
        <el-table-column show-overflow-tooltip prop="update_time" label="修改时间" width="160" />
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
    <!--移库单详情弹窗（复用moveStor的AddDialog）-->
    <AddDialog @AddChanged="crud.toQuery" />
  </div>
</template>

<script>
import levelchangedtl from '@/views/wms/st/levelchange/levelchangedtl'
import CRUD, { crud, header, presenter } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import request from '@/utils/request'
import AddDialog from '@/views/wms/st/inStor/moveStor/AddDialog'

export default {
  name: 'Levelchangedtl',
  components: { crudOperation, rrOperation, pagination, AddDialog },
  cruds() {
    return CRUD({
      title: '管制卷移库记录',
      url: '/api/levelchangedtl',
      idField: 'id',
      sort: 'create_time,desc',
      crudMethod: { ...levelchangedtl },
      optShow: {
        add: false,
        edit: false,
        del: false,
        download: false,
        reset: true
      },
      queryOnPresenterCreated: false
    })
  },
  mixins: [presenter(), header(), crud()],
  data() {
    return {
      permission: {
        add: ['admin', 'levelchangedtl:add'],
        edit: ['admin', 'levelchangedtl:edit'],
        del: ['admin', 'levelchangedtl:del']
      }
    }
  },
  computed: {
    canOperate() {
      if (this.crud.selections.length === 0) return false
      const row = this.crud.selections[0]
      return row.status === '0' || row.status === '9'
    }
  },
  created() {
    this.initQuery()
  },
  methods: {
    // 自定义级别列表头（含问号提示）
    renderLevelHeader(h, { column }) {
      return h('span', [
        h('span', column.label || '级别'),
        h('el-tooltip', {
          props: {
            effect: 'dark',
            placement: 'top',
            content: '级别对应关系说明：\n 6级 → 管制、\n 5级→报废、\n 4级→改切 、\n 3级→A- 、\n 2级→A 、\n 1级→A+'
          }
        }, [
          h('i', {
            class: 'el-icon-question',
            style: { marginLeft: '4px', color: '#909399', cursor: 'pointer', fontSize: '14px' }
          })
        ])
      ])
    },
    handleMarkComplete(row) {
      this.$confirm('确认将子卷 ' + row.container_name + ' 标记为完成吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        levelchangedtl.markComplete(row).then(res => {
          this.crud.notify('标记完成成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
          this.crud.toQuery()
        })
      }).catch(() => {})
    },
    handleRetryMove(row) {
      this.$confirm('确认对子卷 ' + row.container_name + ' 重新执行移库操作吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        levelchangedtl.retryMove(row).then(res => {
          this.crud.notify('重新移库完成', CRUD.NOTIFICATION_TYPE.SUCCESS)
          this.crud.toQuery()
        })
      }).catch(() => {
        this.crud.toQuery()
      })
    },
    /* 搜索框创建时间默认最近一周 */
    initQuery() {
      const end = new Date()
      const start = new Date()
      const endYear = end.getFullYear()
      var endMonth = end.getMonth() + 1
      if (end.getMonth() + 1 < 10) {
        endMonth = '0' + endMonth.toString()
      }
      var endDay = end.getDate()
      if (end.getDate() < 10) {
        endDay = '0' + endDay.toString()
      }
      const endDate = endYear + '-' + endMonth + '-' + endDay + ' 23:59:59'
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      const startYear = start.getFullYear()
      var startMonth = start.getMonth() + 1
      if (start.getMonth() + 1 < 10) {
        startMonth = '0' + startMonth.toString()
      }
      var startDay = start.getDate()
      if (start.getDate() < 10) {
        startDay = '0' + startDay.toString()
      }
      const startDate = startYear + '-' + startMonth + '-' + startDay + ' 00:00:00'
      this.$set(this.query, 'createTime', [startDate, endDate])
      this.crud.toQuery()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-dialog__body {
  padding-top: 10px;
}
</style>
