<!-- 需求 -->
<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="cahkan_click(scope.row)">详情</el-button>
          <!-- <el-button type="primary">修改</el-button>
          <el-button type="danger">删除</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="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="newrequire = false">取 消</el-button>
          <el-button type="primary" @click="examine_click">审 核</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {getdemandlist,getdemandget,getdemandcheck} from '../../../api/index'
import { uParseTime } from "@/utils/tools";
  export default{
    props:{
      Message:Object
    },
    data(){
      return{
        tableData: [{index:'1',type:'新增需求',miaoshu:'增加统计页面',zhuangtai:'未开始',jilu:'马文强',jilutime:'2023-08-01',fuze:'王哲',endtime:''}],
        shenhe:1,
        newrequire:false,
        input:'',
        textarea:'',

        type_options:[{value:1,label:'需求'},{value:2,label:'BUG'}],
        status_options:[{value:1,label:'未开始'},{value:2,label:'开发中'},{value:3,label:'已完成'}],
        // 修改/详情
        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()),
        },
        examine_id:'',
      }
    },
    created(){
      this.getlist()
    },
    methods:{
      // 详情
      cahkan_click(row){
        this.newrequire = true
        this.examine_id = row.id
        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,
          }
        })
      },
      examine_click(){
        getdemandcheck(this.examine_id).then(res =>{
          console.log('需求',res);
          this.newrequire = false
        })
      },
      // 数据源
      getlist(){
        getdemandlist().then(res =>{
          const list = res.data.list
          const table = []
          list.forEach((item,index) => {
            if(item.is_check==0){
              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>