<!-- 需求 -->
<template>
  <div class="context">
    <div style="text-align: right;margin-bottom: 20px;">
      <el-button type="primary" @click="newrequire = !newrequire">
        新增需求
      </el-button> 
    </div>
    <div>
      <el-table
        :data="tableData"
        border
        size='small'
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        style="width: 100%;">
        <el-table-column
        type="index"
        label="序号"
        width="50">
        </el-table-column>
        <el-table-column
        prop="type"
        label="需求类型"
        width="150">
        </el-table-column>
        <el-table-column
        prop="miaoshu"
        label="需求描述"
        width="150">
        </el-table-column>
        <el-table-column
        prop="zhuangtai"
        label="状态"
        width="100">
        </el-table-column>
        <el-table-column
        prop="jilu"
        label="记录人"
        width="100">
        </el-table-column>
        <el-table-column
        prop="jilutime"
        label="记录时间"
        width="120">
        </el-table-column>
        <el-table-column
        prop="fuze"
        label="负责人"
        width="100">
        </el-table-column>
        <el-table-column
        prop="endtime"
        label="完成时间"
        width="120">
        </el-table-column>
        <el-table-column
        prop="address"
        label="操作"
        width="">
        <template slot-scope="scope">
          <el-button type="primary" @click="chakan_open(scope.row)">详情</el-button>
          <el-button type="primary" @click="xiugai_open(scope.row)">修改</el-button>
          <el-button type="danger" @click="dele_open(scope.row)">删除</el-button>
          
        </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹窗 -->
    <div>
       <!-- 新增 -->
      <el-dialog
        title="新增需求"
        :visible.sync="newrequire"
        :modal-append-to-body="false"
        width="60%"
        >
        <div style="height: 50vh;overflow: overlay;">
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span>需求类型：</span>
              <el-select v-model="demand.demand_type" placeholder="请选择">
                <el-option
                  v-for="item in type_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div style="flex: 1;">
              <span>需求状态：</span>
              <el-select v-model="demand.demand_status" placeholder="请选择">
                <el-option
                  v-for="item in status_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>

          <div style="margin-bottom: 20px;">
              <span>需求描述：</span>
              <el-input v-model="demand.demand_desc" placeholder="请输入内容" style="width: 60%;"></el-input>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
                <span>登记人：</span>
                <el-input v-model="demand.demand_creator" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
            <div style="flex: 1;">
              <span>登记时间：</span>
              <el-date-picker
                v-model="demand.demand_create_date"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期" 
                style="width: 60%;">
              </el-date-picker>
            </div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
                <span>负责人：</span>
                <el-input v-model="demand.demand_director" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
            <div style="flex: 1;">
              <span>完成时间：</span>
              <!-- <el-input v-model="demand.demand_finish_date" placeholder="请输入内容" style="width: 60%;"></el-input> -->
              <el-date-picker
                v-model="demand.demand_finish_date"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期" 
                style="width: 60%;">
              </el-date-picker>
            </div>
          </div>
          <div>
            <span>需求详情：</span>
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="demand.demand_detail">
            </el-input>

            <!-- <editor ref="editor"
                    id="editor"
                    style="width: 100%"
                    v-bind:r_content="content">
            </editor> -->
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="newrequire = false">取 消</el-button>
          <el-button type="primary" @click="add_click">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 详情 -->
      <el-dialog
        title="需求详情"
        :visible.sync="details_dialog"
        :modal-append-to-body="false"
        width="60%"
        >
        <div style="height: 50vh;overflow: overlay;">
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span>需求类型：</span>
              <el-select v-model="details.demand_type" placeholder="请选择">
                <el-option
                  v-for="item in type_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div style="flex: 1;">
              <span>需求状态：</span>
              <el-select v-model="details.demand_status" placeholder="请选择">
                <el-option
                  v-for="item in status_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>

          <div style="margin-bottom: 20px;">
              <span>需求描述：</span>
              <el-input v-model="details.demand_desc" placeholder="请输入内容" style="width: 60%;"></el-input>
          </div>

          <div class="xinxi"  style="">
            <div style="flex: 1;">
                <span>登记人：</span>
                <el-input v-model="details.demand_creator" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
            <div style="flex: 1;">
              <span>登记时间：</span>
              <el-date-picker
                v-model="details.demand_create_date"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期" 
                style="width: 60%;">
              </el-date-picker>
            </div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
                <span>负责人：</span>
                <el-input v-model="details.demand_director" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
            <div style="flex: 1;">
              <span>完成时间：</span>
              <!-- <el-input v-model="demand.demand_finish_date" placeholder="请输入内容" style="width: 60%;"></el-input> -->
              <el-date-picker
                v-model="details.demand_finish_date"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期" 
                style="width: 60%;">
              </el-date-picker>
            </div>
          </div>
          <div>
            <span>需求详情：</span>
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="details.demand_detail">
            </el-input>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="details_dialog = false">取 消</el-button>
          <el-button type="primary" @click="details_dialog = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改 -->
      <el-dialog
        title="修改需求"
        :visible.sync="editor_dialog"
        :modal-append-to-body="false"
        width="60%"
        >
        <div style="height: 50vh;overflow: overlay;">
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span>需求类型：</span>
              <el-select v-model="details.demand_type" placeholder="请选择">
                <el-option
                  v-for="item in type_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div style="flex: 1;">
              <span>需求状态：</span>
              <el-select v-model="details.demand_status" placeholder="请选择">
                <el-option
                  v-for="item in status_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>

          <div style="margin-bottom: 20px;">
              <span>需求描述：</span>
              <el-input v-model="details.demand_desc" placeholder="请输入内容" style="width: 60%;"></el-input>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
                <span>登记人：</span>
                <el-input v-model="details.demand_creator" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
            <div style="flex: 1;">
              <span>登记时间：</span>
              <el-date-picker
                v-model="details.demand_create_date"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期" 
                style="width: 60%;">
              </el-date-picker>
            </div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
                <span>负责人：</span>
                <el-input v-model="details.demand_director" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
            <div style="flex: 1;">
              <span>完成时间：</span>
              <!-- <el-input v-model="demand.demand_finish_date" placeholder="请输入内容" style="width: 60%;"></el-input> -->
              <el-date-picker
                v-model="details.demand_finish_date"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期" 
                style="width: 60%;">
              </el-date-picker>
            </div>
          </div>
          <div>
            <span>需求详情：</span>
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="details.demand_detail">
            </el-input>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editor_dialog = false">取 消</el-button>
          <el-button type="primary" @click="editor_click">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除 -->
      <el-dialog
        title="提示"
        :visible.sync="delet_dialog"
        width="30%">
        <span>是否删除该数据</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="delet_dialog = false">取 消</el-button>
          <el-button type="primary" @click="delete_click">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import Editor from '@/components/Editor'
import { uParseTime } from "@/utils/tools";
import {getdemandcreate,getdemandlist,getdemandget,getdemandedit,getdemanddelete} from '../../../api/index'
  export default{
    props:{
      Message:Object
    },
    components:{
      Editor,
    },
    data(){
      return{
        tableData: [],
        shenhe:1,
        newrequire:false,
        input:'',
        textarea:'',
        content:'',
        contenttwo:'',
        // 新增
        demand:{
          demand_type:'',
          demand_desc:'',
          demand_detail:'',
          demand_status:'',
          demand_director:'',
          demand_finish_date: this.getTime(new Date()),
          demand_creator:'',
          demand_create_date: this.getTime(new Date()),
        },
        // 修改/详情
        details:{
          demand_type:'',
          demand_desc:'',
          demand_detail:'',
          demand_status:'',
          demand_director:'',
          demand_finish_date: this.getTime(new Date()),
          demand_creator:'',
          demand_create_date: this.getTime(new Date()),
        },
        details2:{
          demand_type:'',
          demand_desc:'',
          demand_detail:'',
          demand_status:'',
          demand_director:'',
          demand_finish_date: this.getTime(new Date()),
          demand_creator:'',
          demand_create_date: this.getTime(new Date()),
        },
        type_options:[{value:1,label:'需求'},{value:2,label:'BUG'}],
        status_options:[{value:1,label:'未开始'},{value:2,label:'开发中'},{value:3,label:'已完成'}],

        details_dialog:false,
        editor_dialog:false,
        delet_dialog:false,
        editor_id:0,
        delet_id:0
      }
    },
    created(){
      this.getlist()
    },
    methods:{
      // 详情
      chakan_open(row){
        this.details_dialog = true
        getdemandget(row.id).then(res =>{
          const detail = res.data.charge_demand
          console.log('detail',detail)
          this.details = {
            demand_type:detail.demand_type,
            demand_desc:detail.demand_desc,
            demand_detail:detail.demand_detail,
            demand_status:detail.demand_status,
            demand_director:detail.demand_director,
            demand_finish_date:detail.demand_finish_date,
            demand_creator:detail.demand_creator,
            demand_create_date:detail.demand_create_date,
          }
          // this.contenttwo = detail.demand_detail
          // var quill = new Quill(this.$refs.editortwo, {
          //   theme: 'snow'
          // });
          // quill.setContents(this.contenttwo)
          // this.$refs.editor2.content2 = this.content2
          // console.log('this.$refs.editor.content2',this.contenttwo);
        })
      },
      // 新增确认
      add_click(){
        const demands = this.demand
        const data ={
          custom_id:this.Message.id,
          demand_type:demands.demand_type,
          demand_desc:demands.demand_desc,
          // demand_detail:this.$refs.editor.content,
          demand_detail:demands.demand_detail,
          demand_status:demands.demand_status,
          demand_director:demands.demand_director,
          demand_finish_date:demands.demand_finish_date,
          demand_creator:demands.demand_creator,
          demand_create_date:demands.demand_create_date
        }
        getdemandcreate(data).then(res =>{
          this.getlist()
          // console.log('getdemandcreate222',res);
        })
        this.newrequire = false
      },
      // 修改
      xiugai_open(row){
        this.editor_dialog = true
        this.editor_id = row.id
        getdemandget(row.id).then(res =>{
          const detail = res.data.charge_demand
          this.details = {
            demand_type:detail.demand_type,
            demand_desc:detail.demand_desc,
            demand_detail:detail.demand_detail,
            demand_status:detail.demand_status,
            demand_director:detail.demand_director,
            demand_finish_date:detail.demand_finish_date,
            demand_creator:detail.demand_creator,
            demand_create_date:detail.demand_create_date,
          }
          console.log('111111');
        })
        
      },
      // 修改确认
      editor_click(){
        const editors = this.details
        const data = {
          id:this.editor_id,
          demand_type:editors.demand_type,
          demand_desc:editors.demand_desc,
          demand_detail:editors.demand_detail,
          demand_status:editors.demand_status,
          demand_director:editors.demand_director,
          demand_finish_date:editors.demand_finish_date,
          demand_creator:editors.demand_creator,
          demand_create_date:editors.demand_create_date,
        }
        console.log('data',data);
        getdemandedit(data).then(res =>{
          const response = res.data.demand
          console.log('resdata',response);
         
          // this.details = {
          //   demand_type:response.demand_type,
          //   demand_desc:response.demand_desc,
          //   demand_detail:response.demand_detail,
          //   demand_status:response.demand_status,
          //   demand_director:response.demand_director,
          //   demand_finish_date:response.demand_finish_date,
          // }
          this.getlist()
        })
        this.editor_dialog = false
      },
      // 删除弹窗
      dele_open(row){
        this.delet_dialog = true
        this.delet_id = row.id
      },
      // 删除确认
      delete_click(){
        getdemanddelete(this.delet_id).then(res =>{
          this.$message({message:res.data.msg,type:'success'})
          console.log('resres',res);
          this.delet_dialog = false
          this.getlist()
        })
        
      },
      // 数据源
      getlist(){
        getdemandlist().then(res =>{
          const list =res.data.list
          const table = []
          console.log('list',list);
          list.forEach((item,index) => {
            if(item.is_check==1){
              const arr={
                id:item.id,
                index:index+1,
                type:this.gettype(item.demand_type),
                miaoshu:item.demand_desc,
                zhuangtai:this.getstatus(item.demand_status),
                jilu:item.demand_creator,
                jilutime:item.demand_create_date,
                fuze:item.demand_director,
                endtime:item.demand_finish_date
                
              }
              table.unshift(arr)
            }
          });
          this.tableData = table
        })
      },
       // 客户类型
      gettype(val){
        const options = this.type_options
        for(let i in options){
          if(val == options[i].value){
            return options[i].label
          }
        }
      },
      // 需求状态
      getstatus(val){
        const options = this.status_options
        for(let i in options){
          if(val == options[i].value){
            return options[i].label
          }
        }
      },
      // 转换时间
      getTime(val) {
        if(val < 0){
          return ""
        }
        if(val == ""){
          return ""
        }else {
          return uParseTime(val, '{y}-{m}-{d}')
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .context{
    padding: 20px 0;
    .xinxi{
      display: flex;
      margin-bottom: 15px;
    }
  }

</style>