<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" :type="'form'" :title="type === 'add' ? '发起大纲条目' : '编辑大纲条目'" :form="form"
      :rules='rules' @submit="submit">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>大纲名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.name" placeholder="请输入大纲名称" clearable style="width: 400px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:year>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>大纲年份：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker style="width: 400px;" v-model="form.year" value-format="yyyy" type="year"
              placeholder="选择大纲年份">
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:menu>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>工作项目：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.menu" @change="changeMenu" style="width: 400px;" placeholder="请选择">
              <el-option v-for="item in menuList" :key="item.id" :label="item.name" :value="item.name">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:level>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>性质级别：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.level" @change="changeLevel" style="width: 400px;" placeholder="请选择">
              <el-option v-for="(item,index) in levelList" :key="item.id" :label="item.name" :value="item.name">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:period>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>工作周期：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.period" placeholder="请输入工作周期" clearable style="width: 400px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:end_time>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>完成时间：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.end_time" placeholder="请输入完成时间" clearable style="width: 400px;"></el-input>
            <!-- <el-input placeholder="补充说明" v-model="form.end_time_explain"></el-input> -->
          </div>
        </div>
      </template>
      <template v-slot:content>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>主要内容：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.content" type="textarea" :rows="8" placeholder="请输入主要内容" clearable
              style="width: 400px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:require>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>工作要求：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.require" type="textarea" :rows="8" placeholder="请输入工作要求" clearable
              style="width: 400px;"></el-input>
          </div>
        </div>
      </template>

      <template v-slot:duty_dep_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>责任科室：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.duty_dep_id" style="width: 400px;" placeholder="请选择">
              <el-option v-for="item in depList" :key="item.id" :label="item.name" :value="item.name">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:join_dep_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>参与科室：
          </div>
          <div class="xy-table-item-content">
            <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
            </el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="form.join_dep_id" @change="handleCheckedDeptChange">
              <el-checkbox @change="handleCheckedDeptSingleChange" v-for="dept in depList" :label="dept.name"
                :key="dept.id">{{dept.name}}</el-checkbox>
            </el-checkbox-group> -->
            <el-input style="width: 400px;" placeholder="请输入参与科室" v-model="form.join_dep_id"></el-input>

          </div>
        </div>
      </template>

      <template v-slot:flow>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>具体流程概述：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.flow" type="textarea" :rows="8" placeholder="请输入具体流程概述" clearable
              style="width: 400px;"></el-input>
          </div>
        </div>
      </template>

      <template v-slot:resource>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>所需资源概述：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.resource" type="textarea" :rows="8" placeholder="请输入所需资源概述" clearable
              style="width: 400px;"></el-input>
          </div>
        </div>
      </template>
       <template v-slot:footerContent>
         <Button type="primary" style='margin-left:5px;margin-bottom:5px;' @click="submit">确认</Button>
         <Button type="primary" ghost style='margin-left:5px;margin-bottom:5px;' @click="isShow=false">取消</Button>

         <Poptip v-if="type=='editor'" transfer confirm title="确认要删除吗？" @on-ok="deleteList">

           <Button type="primary" ghost style='margin-left:5px;margin-bottom:5px;'>删除</Button>
         </Poptip>

      </template>

    </xy-dialog>

  </div>
</template>

<script>
  import {
    Message
  } from 'element-ui'
  import {
    show,
    save,
    destroy
  } from '@/api/task/newplan.js'
  import {
    listdept
  } from "@/api/system/department.js"
  import {
    listregulation
  } from "@/api/lawsfile/regulation.js";
  export default {
    components: {

    },
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        menuSort:0,
        form: {
          mission_plan_id:'',
          name: '',
          year: '',
          menu: '',
          level: '',
          period: '',
          end_time: '',
          end_time_explain: '',
          content: '',
          require: '',

          duty_dep_id: '',

          join_dep_id: '',
          join_dep_explain: '',
          flow: '',
          resource: '',
          sort:0,
          menu_id:'',
          level_id:''

        },
        depList: [],
        checkAll: false,
        isIndeterminate: true,
        menuList: [],
        levelList: [],
        rules: {
          name: [{
            required: true,
            message: '请输入大纲条目名称'
          }],
          year: [{
            required: true,
            message: '请输入大纲条目年份'
          }],
          menu: [{
            required: true,
            message: '请选择工作项目'
          }],
          level: [{
            required: true,
            message: '请选择性质级别'
          }],
          period: [{
            required: true,
            message: '请输入工作周期'
          }],
          end_time: [{
            required: true,
            message: '请输入完成时间'
          }],
        }
      }
    },
    created() {
      this.loadDeptOptions()
      this.getMenus()
    },
    methods: {
      setMissionId(e){
        if(e){
          this.form.mission_plan_id = e
        }
      },
      setName(e){
        if(e){
          this.form.name = e
        }
      },
      async getMenus(){
        var that = this;
        await listregulation(1, 20).then(res => {
          this.menuList = res
        }).catch(error => {
          console.log(error)
        })
      },
      changeMenu(e) {
        if (e) {
          this.form.level = ''
          this.form.level_id = ''
          this.menuList.map(item => {
            if (e === item.name) {
              this.form.menu_id = item.id
              this.levelList = item.children ? item.children: [],
              this.menuSort = item.sort
            }
          })
        }
      },
      changeLevel(e){
        let sort = 0
        if(e){
          this.levelList.map((item,index)=>{
            if(e===item.name){
              sort = item.sort
              this.form.level_id = item.id
            }
          })
          this.form.sort = this.menuSort +'' +sort
          console.log(this.form.sort)
        }
      },
      // 选择科室
      loadDeptOptions() {
        listdept().
        then((res) => {
          for (var m of res) {
            m.checked = false;
          }
          this.depList = res;
        }).catch(error => {
          console.log(error)
          reject(error)
        })
      },
      handleCheckAllChange(val) {
        let options = [];
        for (var m of this.depList) {
          options.push(m.id);
        }
        this.form.join_dep_id = val ? options : [];
        this.isIndeterminate = false;
      },
      handleCheckedDeptSingleChange(v) {
        //如果出现取消的操作 就要执行删除
        console.log(v);
        var that = this;
        if (this.form.join_dep_id)
          that.delDeptItem();

      },
      //删除操作
      delDeptItem() {
        for (var m of this.depList) {
          if (this.form.join_dep_id.indexOf(m.name) == -1) {
            var d = this.form.join_dep_id.filter(function(t) {
              return t.name == m.name;
            })

            if (d.length != 0) {
              delDep(d[0].name).then(response => {}).catch(error => {
                console.log(error)
              })
            }

          }
        }
      },
      handleCheckedDeptChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.depList.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.depList.length;
      },
      clickSubmit() {
        this.$refs.dialog.submit()
      },
      submit() {
        if (this.id) {
          this.form.id = this.id
        }
         console.log(this.form)
        if(this.type=='add'){
          this.form.id = ''
          console.log(this.form)
          // return
        }
        save({
          table_name: 'new_plans',
          ...this.form
        }).then(res => {
          Message({
            type: 'success',
            message: this.type === 'add' ? '新增大纲条目成功' : '编辑大纲条目成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
      },
      deleteList() {
        var that = this;
          destroy({
            id: this.id,
            table_name: 'new_plans'
          }).then(response => {
            this.$Message.success('操作成功');
            this.isShow = false
            this.$emit('refresh')
          }).catch(error => {
            console.log(error)
            reject(error)
          })
      },
      getDetail() {
        show({
          id: this.id,
          table_name: 'new_plans',
        }).then(res => {
          this.form = {
            mission_plan_id:res?.mission_plan_id,
            name: res?.name,
            year: res ? res.year + '' : '',
            menu: res?.menu,
            level: res?.level,
            period: res?.period,
            end_time: res?.end_time,
            end_time_explain: res?.end_time_explain,
            content: res?.content,
            require: res?.require,

            duty_dep_id: res?.duty_dep_id,

            join_dep_id: res ? res.join_dep_id : [],
            join_dep_explain: res?.join_dep_explain,
            flow: res?.flow,
            resource: res?.resource,
            sort:res.sort?res.sort:0,
            menu_id:res?.menu_id,
            level_id:res?.level_id
          }
          this.menuList.map(item=>{
            if(this.form.menu==item.name){
              this.levelList = item.children
            }
          })
        })
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
          }
          if (this.type === 'add') {
            var date = new Date()
            this.form.year = date.getFullYear() + ''
          }
        } else {
          this.id = ''
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .end_time_explain,
    ::v-deep .join_dep_explain,
        ::v-deep .mission_plan_id{
    display: none;
  }

  ::v-deep .el-form>div {
    align-items: flex-start !important;
  }

  .xy-table-item {
    padding-right: 0
  }

  ::v-deep .xy-table-item-label {
    padding-right: 0
  }
</style>
