<template>
  <div>
    <!-- 查询条件 -->
    <Form inline>
      <FormItem>
        <span style="margin-right: 6px;">开始时间:</span>
        <DatePicker type="date" v-model="deadline_time_start" style="width: 60%;" placeholder=""></DatePicker>
      </FormItem>
      <FormItem>
        <span style="margin-right: 6px;">结束时间:</span>
        <DatePicker type="date" v-model="deadline_time_end" style="width: 60%;" placeholder=""></DatePicker>
      </FormItem>
      <FormItem>
        <span style="margin-right: 6px;">状态:</span>
        <Select style="width: 60px;" v-model="is_complete" placeholder="">
          <Option value="是">是</Option>
          <Option value="否">否</Option>
        </Select>
        <!-- <Input type="text" style="width: 60%;" v-model="is_complete" clearable></Input> -->
      </FormItem>
      <FormItem>
        <span style="margin-right: 6px;">任务名称:</span>
        <Input type="text" v-model="task_name" style="width: 60%;" clearable></Input>
      </FormItem>
      <FormItem>
        <span style="margin-right: 6px;">任务发起人:</span>
        <Input type="text" v-model="task_user_name" style="width: 60%;" clearable></Input>
      </FormItem>
      <FormItem>
        <span style="margin-right: 6px;">任务完成单位:</span>
        <Input type="text" v-model="handling_company_name" style="width: 60%;" clearable></Input>
      </FormItem>
      <FormItem>
        <Button @click="search" type="success"
          >搜索</Button
        >
      </FormItem>
    </Form>
    <Table stripe :columns="columns" :data="dataList">
      <template slot-scope="{ row, index }" slot="description_task">
        <Poptip trigger="hover">
          <template slot="content" style="white-space: normal;">
            <div>{{row.description_task}}</div>
          </template>
          <div class="description-div">{{row.description_task}}</div>
        </Poptip>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <div class="flex-div">
          <Button type="primary" class="mr5" v-if="row.is_complete === '2'" @click="dispose(row)">处置</Button>
          <Button type="primary" class="mr5" v-else-if="row.is_complete === '1'" @click="disposeInfo(row, 'info')">处置信息</Button>
        </div>
      </template>
    </Table>
    <Page class="page_style"  :total="params.totalRecord" :current="params.pageNo"
            :page-size="params.pageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
    <Modal v-model="modal" title="处置信息">
      <Form :model="formData" :disabled="what == 'info'" ref="form1" label-position="left" :label-width="120">
        <Row>
          <Col span="20">
            <FormItem label="任务结束时间：" prop="completion_time" :rules="[{required: true, type: 'date', message: '必填', trigger: 'change' }]">
              <DatePicker type="datetime" :value="formData.completion_time" placeholder="请选择任结束时间" style="width:100%;" transfer></DatePicker>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="20">
            <FormItem label="任务完成描述：" prop="description_task_end" :rules="[{required: true, message: '必填', trigger: 'blur' }]">
              <Input v-model="formData.description_task_end" type="textarea" :rows="4" placeholder="请输入任务完成描述"></Input>
          </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="default" @click="modal = false">取消</Button>
        <Button type="primary" v-if="what == 'add'" @click="save">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { findGridSpecialTaskHandlingList, updateGridSpecialTask } from '@/api/contradiction.js'
import { datetime2str } from '@/api/eventlist.js'
export default {
  name: 'specialList',
  data () {
    return {
      deadline_time_start: '',
      deadline_time_end: '',
      is_complete: '',
      task_name: '',
      task_user_name: '',
      handling_company_name: '',
      modal: false,
      formData: {
        is_complete: '1'
      },
      columns: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        { title: '任务名称', key: 'task_name', align: 'center', width: '130px' },
        { title: '任务状态', key: 'is_complete', align: 'center', width: '90px' },
        { title: '任务发起人', key: 'taskUserName', align: 'center', width: '130px' },
        { title: '任务完成单位', key: 'handlingCompanyName', align: 'center', width: '130px' },
        { title: '任务截至日期', key: 'deadline_time', align: 'center', width: '150px' },
        { title: '任务结束时间', key: 'completion_time', align: 'center', width: '150px' },
        { title: '任务描述', slot: 'description_task', align: 'center' },
        { title: '操作', fixed: 'right', slot: 'action', align: 'center', width: '220px' }
      ],
      dataList: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      what: 'add'
    }
  },
  components: {},
  watch: {},
  mounted () {
    this.getList()
  },
  methods: {
    search () {
      this.getList()
    },
    getList () {
      // 处理条件
      let condition = {}
      if (this.deadline_time_start !== '') {
        condition.deadline_time_start = datetime2str(this.deadline_time_start).slice(0, 10)
      }
      if (this.deadline_time_end !== '') {
        condition.deadline_time_end = datetime2str(this.deadline_time_end).slice(0, 10)
      }
      if (this.is_complete !== '') {
        condition.is_complete = this.is_complete
      }
      if (this.task_name !== '') {
        condition.task_name = this.task_name
      }
      if (this.task_user_name !== '') {
        condition.task_user_name = this.task_user_name
      }
      if (this.handling_company_name !== '') {
        condition.handling_company_name = this.handling_company_name
      }
      findGridSpecialTaskHandlingList({ ...this.params, ...condition }).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
          this.params.totalRecord = res.data.data.totalRecord
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    changePageNo (pageNo) {
      this.params.pageNo = pageNo
      this.getList(this.params)
    },
    size (pageSize) {
      this.params.pageSize = pageSize
      this.changePageNo()
    },
    getInfo (item) { // 详情
      this.$router.push({
        name: 'specialTaskSpecialInitiate',
        params: item
      })
    },
    dispose (item) {
      this.what = 'add'
      this.formData = {}
      this.modal = true
      this.formData.id = item.id
    },
    save () {
      this.$refs['form1'].validate((valid) => {
        if (valid) {
          this.disposeTask()
        } else {
          return false
        }
      })
    },
    disposeTask () {
      this.formData.completion_time = datetime2str(this.formData.completion_time)
      this.formData.is_complete = '1'
      updateGridSpecialTask(this.formData).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('处置成功')
          this.modal = false
          this.getList()
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    disposeInfo (item, what) { // 查看处置信息
      this.modal = true
      this.formData = item
      this.what = what
    }
  }
}
</script>
<style scoped lang="less">
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  /deep/ .ivu-input-disabled{
  color: #515a6e !important; /* 修改为你想要的颜色 */
    font-size: 14px;
  }
  .description-div {
    /* 设置文本只显示三行 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    /* 设置文本超出部分省略 */
    text-overflow: ellipsis;
  }
</style>
