<template>
  <div class="contradiction-div">
    <Tabs value="name1" v-model="tabValue">
      <TabPane label="基本信息" name="1">
        <div class="title-style">专项任务信息</div>
        <Form :model="formInline" :disabled="formInline.what == 'info'" ref="form1" label-position="left" :label-width="130">
          <Row :gutter="16">
            <Col span="8">
              <FormItem label="任务名称：" prop="task_name" :rules="[{required: true, message: '必填', trigger: 'blur' }]">
                <Input v-model="formInline.task_name" :disabled="params.what === 'edit'" placeholder="请输入任务名称"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="任务截止日期：" prop="deadline_time">
                <DatePicker type="datetime" v-model="formInline.deadline_time" :disabled="params.what === 'edit'" placeholder="请任务截止日期" style="width:100%;" transfer></DatePicker>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="8">
              <FormItem label="任务完成单位：" prop="deadline_time">
                <Select v-model="formInline.handling_company_id" filterable transfer>
                  <Option v-for="(item, index) in companyList" v-bind:key="index" :value="item.id">{{item.name}}</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="16">
              <FormItem label="任务描述：" prop="description_task" :rules="[{required: true, message: '必填', trigger: 'blur' }]">
                <Input v-model="formInline.description_task" :disabled="params.what === 'edit'" type="textarea" :rows="4"  placeholder="请输入任务描述"></Input>
              </FormItem>
            </Col>
          </Row>
        </Form>
        <div class="title-style" v-if="formInline.is_complete == '1'">处置信息</div>
        <Form :model="formInline" ref="form2" :disabled="true" label-position="left" :label-width="130" v-if="formInline.is_complete == '1'">
          <Row>
            <Col span="16">
              <FormItem label="任务结束时间：">
                <DatePicker type="datetime" v-model="formInline.completion_time" placeholder="请选择任结束时间" style="width:100%;" transfer></DatePicker>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="16">
              <FormItem label="任务完成描述：">
                <Input v-model="formInline.description_task_end" type="textarea" :rows="4" placeholder="请输入任务完成描述"></Input>
            </FormItem>
            </Col>
          </Row>
        </Form>
        <div class="flex-div" v-if="!formInline.is_complete" style="margin-right: 30%;">
          <Button type="primary" class="mr10" :loading="loadingBtn" @click="saveData('form1')">保存</Button>
        </div>
      </TabPane>
    </Tabs>
    <Modal v-model="modal1" title="提示">
      <p>{{confirmTtile}}</p>
      <div slot="footer">
        <Button type="default" @click="modal1 = false">取消</Button>
        <Button type="primary" @click="save">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  insertGridSpecialTask, selectOfficeTypeParentList
} from '@/api/contradiction.js'
import { datetime2str } from '@/api/eventlist.js'
import validateData from './validate.js'
export default {
  inject: ['reload'],
  name: 'registerAdd',
  data () {
    return {
      companyList: [], // 单位下拉数据
      imgName: '',
      visible: false,
      tabValue: '1',
      confirmTtile: '',
      modal1: false,
      isEmpty: validateData.isEmpty,
      formInline: this.$route.params || {},
      rules: {},
      param: {
        pageNo: 1,
        pageSize: 10
      },
      params: this.$route.params,
      loadingBtn: false
    }
  },
  computed: {
    serverUserInfo () {
      return this.$store.state.user.severUserInfo
    }
  },
  watch: {
    '$route' (to, from) {
      // 路由发生变化时的处理逻辑
      console.log('Route changed from', from, 'to', to)
      if (to.query.type) {
        this.getReload()
        // this.params.what = 'add'
        // this.formInline = {
        //   userList: [
        //     { event_user_type: '' }
        //     // ... more items
        //   ],
        //   info: '',
        //   garden_id: '',
        //   building_id: ''
        // }
      }
      // 你可以在这里根据路由变化执行相应的操作
    }
  },
  mounted () {
    this.getCompanyData()
  },
  methods: {
    getCompanyData () {
      selectOfficeTypeParentList({ officeType: 1 }).then(res => {
        if (res.data.errcode === 0) {
          this.companyList = res.data.data
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    getReload () {
      this.reload()
    },
    saveData () { // 保存按钮
      this.$refs['form1'].validate((valid) => {
        if (valid) {
          console.log('success')
          this.insertTaskData() // 调用保存专项任务方法
        } else {
          console.log('fail')
          return false
        }
      })
    },
    insertTaskData () { // 保存专项任务方法
      this.loadingBtn = true
      this.formInline.deadline_time = datetime2str(this.formInline.deadline_time)
      insertGridSpecialTask(this.formInline).then(res => {
        this.loadingBtn = false
        if (res.data.errcode === 0) {
          this.$Message.success('保存成功')
          this.$router.push({
            name: 'specialTaskSpecialList'
          })
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    save () {}
  }
}
</script>
<style scoped lang="less">
 /deep/ input:disabled,textarea:disabled {
    opacity: 1;
    -webkit-text-fill-color: #515a6e;
    font-size: 14px;
  }

  /* 修改被禁用的Select组件的文本颜色 */
 /deep/ .ivu-select-disabled .ivu-select-selected-value{
    color: #515a6e; /* 修改为你想要的颜色 */
     font-size: 14px;
}
 /deep/ .ivu-select-disabled .ivu-select-placeholder{
    color: #515a6e; /* 修改为你想要的颜色 */
     font-size: 14px;
}
/deep/ .ivu-input-disabled{
 color: #515a6e !important; /* 修改为你想要的颜色 */
  font-size: 14px;
}
/deep/ .ivu-form .ivu-form-item-label{
  font-size: 14px;
}
.contradiction-div {
    // padding: 10px;
    background: #fff;
    padding:10px;
     font-size: 14px;
    .title-style {
      padding: 8px 12px;
      background-color: #ecf8ff;
      border-radius: 4px;
      border-left: 5px solid #50bfff;
      margin: 15px 0;
      font-size: 16px;
      width: 100%;
    }
  }
  .red-star {
    color: red;
  }
  .flex-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  //.Input{
  //  color: black;
  //}
  .mr10 {
    margin-right: 10px;
  }
</style>
