<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="5" :sm="24">
            <a-form-item label="井号">
              <a-input placeholder="请输入" v-model="queryParam.jh" />
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="24">
            <a-form-item label="状态">
              <a-radio-group v-model="queryParam.exist">
                <a-radio :value="1">已截取</a-radio>
                <a-radio :value="0">无曲线</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="() => this.$refs.table.refresh(true)" style="margin-right: 8px">
                查询
              </a-button>
              <a-button-group>
                <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
                <a-button type="primary" icon="edit" @click="handleEdit">编辑</a-button>
                <a-button type="dashed" icon="remove" @click="handleRemove">删除</a-button>
              </a-button-group>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <s-table
      ref="table"
      rowKey="ID"
      showPagination="auto"
      size="default"
      childrenColumnName="none"
      :columns="columns"
      :data="loadData"
      :customRow="rowClick"
      :rowClassName="setRowClassName"
    >
      <span slot="rownum" slot-scope="text, record, index">
        {{ index + 1 + serailStartAt() }}
      </span>
      <template slot="zt" slot-scope="text, record">
        <span style="color: green" v-if="record.SL > 0">已截取</span>
        <span style="color: red" v-else-if="record.LJKBS === '0'">无曲线</span>
        <span style="color: red" v-else>未截取</span>
      </template>
    </s-table>

    <case-form ref="caseForm" @ok="modalFormOk" />
  </a-card>
</template>

<script>
import STable from '@/components/table/'
import warnApi from '@/api/warnApi'
import CaseForm from './CaseForm'

export default {
  name: 'CaseManage',
  components: {
    STable,
    CaseForm
  },
  data () {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      form: null,
      mdl: {},
      // 查询参数
      queryParam: {
        jh: '',
        exist: undefined
      },
      // 表头
      columns: [
        {
          title: '状态',
          dataIndex: 'LJKBS',
          scopedSlots: { customRender: 'zt' },
        },
        {
          title: '井号',
          dataIndex: 'JH'
        },
        {
          title: '复杂序号',
          dataIndex: 'SGXH',
        },
        {
          title: '复杂名称',
          dataIndex: 'SGMC'
        },
        {
          title: '复杂类别',
          dataIndex: 'MC'
        },
        {
          title: '复杂级别',
          dataIndex: 'DJMC'
        },
        {
          title: '发生日期',
          dataIndex: 'FSRQ'
        },
        {
          title: '解除日期',
          dataIndex: 'JCRQ'
        },
        {
          title: '损失时间',
          dataIndex: 'SSSJ'
        },
        {
          title: '当时井深',
          dataIndex: 'DSJS'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.clickedRow = undefined
        const { queryParam } = this
        let queryBody = {}
        if (queryParam.jh) {
          queryBody['jh'] = queryParam.jh
        }
        if (queryParam.exist === 1) {
          queryBody['sl'] = 1
        } else if (queryParam.exist === 0) {
          queryBody['ljkbs'] = 1
        }
        queryBody = Object.assign(queryBody, parameter)
        return warnApi.getComplexList(queryBody)
          .then(res => {
            console.log(res)
            return res.result
          })
      },

      selectedRowKeys: [],
      selectedRows: [],
      clickedRow: undefined
    }
  },
  created () {

  },
  mounted () { },
  computed: {},
  watch: {},
  methods: {
    handleEdit (record) {
      if (!this.clickedRow) {
        this.$notification.warning({ message: '提示', description: '请选择一条记录进行编辑' })
        return
      }

      this.$refs.caseForm.edit(this.clickedRow)
    },
    handleAdd () {
      this.$refs.caseForm.add()
    },
    handleRemove () {
      if (!this.clickedRow) {
        this.$notification.warning({ message: '提示', description: '请选择一条记录进行删除' })
        return
      }
      const that = this
      this.$confirm({
        title: "确认删除",
        content: "是否删除选中数据?",
        onOk: function () {
          warnApi.delComplexCase({ jh: that.clickedRow.JH, albh: that.clickedRow.SGXH })
            .then(res => {
              that.$message.success("数据已删除")
              that.$refs.table.refresh(true)
            }).catch(e => {
              that.$message.info(e.message)
            })
        }
      });
    },
    serailStartAt () {
      const c = this.$refs.table.localPagination.current - 1
      return (c < 0 ? 0 : c) * this.$refs.table.localPagination.pageSize
    },
    rowClick (record, index) {
      return {
        on: {
          click: () => {
            this.clickedRow = record
          }
        }
      }
    },
    setRowClassName (record, index) {
      return (this.clickedRow && record.A === this.clickedRow.A) ? 'clickRowStyle' : ''
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .clickRowStyle {
  background-color: #e6f7ff;
}
</style>
