<template>
  <div class="app-container">
    <div class="filter-container">
      <sticky style="margin-bottom: 10px;">
        <div class="sub-navbar">
          <el-button :disabled="!$refs.list || !$refs.list.selection.length" type="success" @click="batchSend">
            <svg-icon icon-class="send" /> 批量发送
          </el-button>
          <el-button :disabled="!$refs.list || !$refs.list.selection.length" type="primary" @click="batchBohui">
            <svg-icon icon-class="reject" /> 批量驳回
          </el-button>
        </div>
      </sticky>
      <el-form>
        <el-form-item>
          <el-input v-model="listQuery.baogaobianhao" placeholder="报告编号" clearable style="width: 200px" @keyup.enter.native="handleFilter" />
          <el-input v-model="listQuery.zhizaodanwei" placeholder="制造单位" clearable style="width: 200px" @keyup.enter.native="handleFilter" />
          <el-button size="small" type="primary" icon="el-icon-search" @click="handleFilter">
            查询
          </el-button>
          <span class="radio-group-label">当前环节：</span>
          <el-radio-group v-model="listQuery.flowstatus" @change="handleFilter">
            <el-radio :label="1">
              新建
            </el-radio>
            <el-radio :label="2">
              审核
            </el-radio>
            <el-radio :label="3">
              审批
            </el-radio>
            <el-radio :label="4">
              办结
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-table
        ref="list"
        :data="list"
        fit
        highlight-current-row
        border
        stripe
        size="mini"
        height="600px"
        width="100%"
        @row-click="onRowClick"
      >
        <el-table-column type="selection" width="40" />
        <el-table-column align="center" type="index" width="50" label="序号" />
        <el-table-column align="center" prop="baogaobianhao" label="报告编号" />
        <el-table-column align="center" prop="zhizaodanwei" label="制造单位" />
        <el-table-column :formatter="formatter.getChineseName" align="center" prop="jianyanrenyuan" label="检验人员" />
        <el-table-column align="center" prop="jianyanriqi" label="检验日期" />
        <el-table-column :formatter="formatter.getChineseName" align="center" prop="shenheren" label="审核人员" />
        <el-table-column align="center" prop="shenheriqi" label="审核日期" />
        <el-table-column :formatter="formatter.getChineseName" align="center" prop="shenpiren" label="审批人员" />
        <el-table-column align="center" prop="shenpiriqi" label="审批日期" />
        <el-table-column align="center" prop="flowstatus" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.flowstatus === 1" type="info">
              新建
            </el-tag>
            <el-tag v-else-if="scope.row.flowstatus === 2" type="info">
              待审核
            </el-tag>
            <el-tag v-else-if="scope.row.flowstatus === 3" type="info">
              待审批
            </el-tag>
            <el-tag v-else-if="scope.row.flowstatus === 4" type="info">
              已办结
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="access" label="操作">
          <template slot-scope="scope">
            <el-button title="编辑" size="mini" type="primary" icon="el-icon-edit" circle @click="edit(scope.row)" />
            <el-button title="查看驳回意见" size="mini" icon="el-icon-message" circle @click="viewAllRejection(scope.row.ysjlId)" />
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page-num.sync="listQuery.pageNum" :page-row.sync="listQuery.pageSize" @pagination="getList" />
      <el-dialog title="核价" :visible.sync="dialogFormVisible" @close="closeDialog">
        <el-form ref="chargeTaskYsjl" :model="chargeTaskYsjl" :rules="rules" label-width="100px">
          <!--          <el-row :gutter="10">
            <el-col :span="11">
              <el-form-item label="产品名称" prop="shebeimingcheng">
                <el-input v-model="chargeTaskYsjl.shebeimingcheng" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="产品型号" prop="guigexinghao">
                <el-input v-model="chargeTaskYsjl.guigexinghao" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="11">
              <el-form-item label="产品图号" prop="chanpintuhao">
                <el-input v-model="chargeTaskYsjl.chanpintuhao" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="产品编号" prop="chanpinbianhao">
                <el-input v-model="chargeTaskYsjl.chanpinbianhao" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="11">
              <el-form-item label="合同编号" prop="hetongbianhao">
                <el-input v-model="chargeTaskYsjl.hetongbianhao" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="造价" prop="zaojia">
                <el-input v-model="chargeTaskYsjl.zaojia" @input="beforeHejia" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="11">
              <el-form-item label="比例" prop="bili">
                <el-select v-model="chargeTaskYsjl.bili" allow-create clearable filterable default-first-option style="width: 100%;" @change="beforeHejia">
                  <el-option v-for="item in biliOptions" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="检验核定" prop="jianyanheding">
                <el-input v-model="chargeTaskYsjl.jianyanheding" disabled />
              </el-form-item>
            </el-col>
          </el-row>-->
          <el-row :gutter="10">
            <el-col :span="11">
              <el-form-item label="造价" prop="zaojia">
                <el-input v-model="chargeTaskYsjl.zaojia" :disabled="isDisabledHejia" @input="beforeHejia" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="比例" prop="bili">
                <el-select v-model="chargeTaskYsjl.bili" allow-create clearable filterable default-first-option style="width: 100%;" :disabled="isDisabledHejia" @change="beforeHejia">
                  <el-option v-for="item in biliOptions" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="11">
              <el-form-item label="检验核定" prop="jianyanheding">
                <el-input v-model="chargeTaskYsjl.jianyanheding" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button v-if="!isDisabledHejia" type="primary" @click="hejia">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="下一环节处理人" :visible.sync="dialogFormVisibleFlow" @close="closeDialogFlow">
        <el-table ref="flowUserList" :data="flowUserList" border fit highlight-current-row @row-click="onRowClickFlow">
          <el-table-column type="selection" width="40" />
          <el-table-column type="index" align="center" label="序号" width="60" />
          <el-table-column align="center" label="处理人" prop="nickname" min-width="40" />
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeDialogFlow">
            取 消
          </el-button>
          <el-button type="success" @click="confirmSend">
            确认
          </el-button>
        </div>
      </el-dialog>
      <el-dialog title="查看驳回原因" :modal-append-to-body="false" :visible.sync="dialogRejectionVisible">
        <el-table :data="rejectionLogList" stripe>
          <el-table-column :formatter="formatter.getChineseName" prop="createBy" label="执行" width="70" show-overflow-tooltip />
          <el-table-column prop="createTime" label="时间" width="150" />
          <el-table-column prop="infoNotes" label="原因" />
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky'
import Pagination from '@/components/Pagination'
import qs from 'qs'

export default {
  name: 'TODOChargeTask',
  components: { Sticky, Pagination },
  data() {
    return {
      list: [],
      listQuery: {
        pageNum: 1, // 页码
        pageSize: 20, // 每页条数
        renlingren: this.$store.getters.userId,
        flowstatus: 1
      },
      total: 0,
      dialogFormVisible: false,
      chargeTaskYsjl: {},
      biliOptions: ['0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1'],
      rules: {
        zaojia: [
          { required: true, message: '请输入造价', trigger: 'input' }
        ],
        bili: [
          { required: true, message: '请输入比例', trigger: 'input' }
        ],
        jianyanheding: [
          { required: true, message: '请输入检验核定', trigger: 'input' }
        ]
      },
      dialogFormVisibleFlow: false,
      flowUserList: [],
      dialogRejectionVisible: false,
      rejectionLogList: [],
      isDisabledHejia: false
    }
  },
  watch: {
    'chargeTaskYsjl.flowstatus': function(val) {
      this.isDisabledHejia = val === 4
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /**
     * 获得办结报告列表信息
     */
    getList() {
      this.api({
        url: '/chargeTask/getTasks',
        method: 'get',
        params: this.listQuery
      }).then(data => {
        this.list = data.list
        this.total = data.total
      })
    },
    handleFilter() {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = 20
      this.getList()
    },
    onRowClick(row) {
      this.$refs.list.toggleRowSelection(row)
    },
    edit(row) {
      this.chargeTaskYsjl = row
      this.beforeHejia()
      this.dialogFormVisible = true
    },
    closeDialog() {
      this.$refs.chargeTaskYsjl.resetFields()
      this.dialogFormVisible = false
    },
    /**
     * 核价前
     */
    beforeHejia() {
      // 锅炉制造费用四舍五入到个位
      this.chargeTaskYsjl.jianyanheding = Math.round((!this.chargeTaskYsjl.zaojia || !this.chargeTaskYsjl.bili) ? 0 : this.common.accMul(this.chargeTaskYsjl.zaojia, this.chargeTaskYsjl.bili / 100))
    },
    /**
     * 核价
     */
    hejia() {
      this.$refs.chargeTaskYsjl.validate((valid) => {
        if (!valid) {
          return
        }
        this.api({
          url: '/ysjl/modifyJyhd',
          method: 'post',
          data: {
            ysjlId: this.chargeTaskYsjl.ysjlId,
            renwuId: this.chargeTaskYsjl.renwuId,
            zaojia: this.chargeTaskYsjl.zaojia,
            bili: this.chargeTaskYsjl.bili,
            jianyanheding: this.chargeTaskYsjl.jianyanheding
          }
        }).then(_ => {
          this.dialogFormVisible = false
          this.$message.success('操作成功！')
          this.getList()
        })
      })
    },
    /**
     * 批量发送
     */
    batchSend() {
      if (this.isNotEqualsLink()) {
        return
      }
      const ids = this.$refs.list.selection.map(row => row.ysjlId)
      const sfd = this.$refs.list.selection[0]
      if (sfd.flowstatus === 3) {
        this.send(ids, sfd)
        return
      } else if (sfd.flowstatus === 4) {
        this.$message.warning('当前环节的收费信息不允许操作！')
        return
      }
      this.api({
        url: '/flow/getUserSfd',
        methods: 'get',
        params: {
          ids: ids,
          flowstatus: sfd.flowstatus,
          bglx: 5,
          shebeizhongleidaima: '1000'
        },
        paramsSerializer: function(params) {
          return qs.stringify(params, { indices: false })
        }
      }).then(data => {
        if (!data) {
          this.$message.warning('部分收费信息的状态已改变，请刷新列表后重新发送下一环节！')
          return
        }
        this.flowUserList = data
        this.dialogFormVisibleFlow = true
      })
    },
    /**
     * 批量驳回
     */
    batchBohui() {
      if (this.isNotEqualsLink()) {
        return
      }
      // 2. 判断是否是存在申请环节的数据
      const isNotEquals = this.$refs.list.selection.filter(row => row.flowstatus === 7).length
      if (isNotEquals) {
        this.$message.warning('只能操作审核、审批环节的收费单！')
        return
      }
      // 3. 输入驳回原因，并驳回
      this.$prompt('请输入驳回原因', '提示', {
        confirmButtonText: '确定',
        inputType: 'textarea',
        cancelButtonText: '取消',
        inputPattern: /.{1,}/,
        inputErrorMessage: '请输入驳回原因！'
      }).then(({ value }) => {
        this.api({
          url: '/chargeTask/bohui',
          method: 'post',
          data: {
            ids: this.$refs.list.selection.map(row => row.ysjlId),
            currentLink: this.$refs.list.selection[0].flowstatus,
            reason: value
          },
          paramsSerializer: function(params) {
            return qs.stringify(params, { indices: false })
          }
        }).then(_ => {
          this.$message.success('操作成功！')
          this.getList()
        })
      })
    },
    /**
     * 判断所有选中数据是否是同一环节
     */
    isNotEqualsLink() {
      if (this.$refs.list.selection[0].flowstatus === 11) {
        this.$message.warning('只能操作非办结环节的收费单！')
        return true
      }
      const isNotEquals = this.$refs.list.selection.filter(row => row.flowstatus !== this.$refs.list.selection[0].flowstatus).length
      if (isNotEquals) {
        this.$message.warning('只能操作相同环节的收费单！')
      }
      return isNotEquals
    },
    onRowClickFlow(row) {
      this.$refs.flowUserList.toggleRowSelection(row)
    },
    closeDialogFlow() {
      this.flowUserList.length = 0
      this.dialogFormVisibleFlow = false
    },
    confirmSend() {
      if (!this.$refs.flowUserList.selection.length) {
        this.$message.warning('请选择下一环节处理人！')
        return false
      }
      const ids = this.$refs.list.selection.map(row => row.ysjlId)
      const sfd = this.$refs.list.selection[0]
      this.send(ids, sfd)
    },
    /**
     * 发送下一环节
     *
     * @param ids         收费主键数组
     * @param sfd         收费信息
     */
    send(ids, sfd) {
      this.api({
        url: '/chargeTask/send',
        method: 'post',
        data: {
          ids: ids,
          currentLink: sfd.flowstatus,
          renlingren: sfd.flowstatus === 3 ? sfd.jianyanrenyuan : this.$refs.flowUserList.selection[0].userId
        },
        paramsSerializer: function(params) {
          return qs.stringify(params, { indices: false })
        }
      }).then(_ => {
        this.closeDialogFlow()
        this.$message.success('操作成功！')
        this.getList()
      })
    },
    /**
     * 查看驳回原因
     * @param id  收费主键
     */
    viewAllRejection(id) {
      this.api({
        url: '/chargeTask/getLogs',
        method: 'get',
        params: {
          taskId: id,
          infoType: -2
        }
      }).then(data => {
        this.rejectionLogList = data
        this.dialogRejectionVisible = true
      })
    }
  }
}
</script>

<style scoped>

</style>
