<template>
  <div>
    <el-table
      ref="memberTable"
      v-loading="listLoading"
      :data="memberData"
      style="width: 100%;"
      border
      fit
      stripe
      highlight-current-row
      height="160"
      @row-click="handleMClick"
    >
      <el-table-column label="姓名">
        <template slot-scope="scope">{{ scope.row.user_.name }}</template>
      </el-table-column>
      <el-table-column label="是否组长">
        <template slot-scope="scope">
          <i class="el-icon-circle-check" v-if="scope.row.is_leader" style="color:green;"></i>
        </template>
      </el-table-column>
      <el-table-column label="身份">
        <template slot-scope="scope" v-if="scope.row.identity">{{ scope.row.identity_.name }}</template>
      </el-table-column>
      <el-table-column label="是否接受">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.is_accepted"
            disabled
            active-color="#13ce66"
            inactive-color="#ff0000"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="人日数">
        <template slot-scope="scope">{{ scope.row.man_days }}</template>
      </el-table-column>
      <el-table-column label="审核天数">
        <template slot-scope="scope">{{ scope.row.days }}</template>
      </el-table-column>
    </el-table>
    <el-row :gutter="6">
      <el-col :xs="24" :md="12">
        <el-card style="margin-top:6px">
          <div slot="header" class="clearfix">
            <span>成员配置</span>
          </div>
          <el-form
            ref="elForm_member"
            :model="formDataMember"
            label-width="60px"
            :rules="rules_member"
            style="margin-top:10px"
          >
          <el-row>
            <el-col :xs="24" :md="8">
              <el-form-item label="成员" prop="user">
                <el-input
                  placeholder="请选择成员"
                  readonly
                  clearable
                  v-model="formDataMember.user_.name"
                  @focus="choseMember"
                >
                  <el-button slot="append" icon="el-icon-search" @click="choseMember"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="8">
              <el-form-item label="身份" prop="identity">
                <el-select
                  v-model="formDataMember.identity"
                  placeholder="请选择"
                  :style="{width: '100%'}"
                  clearable
                >
                  <el-option
                    v-for="item in identityOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="8">
              <el-form-item prop="is_leader">
                <el-checkbox v-model="formDataMember.is_leader">组长</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
            <el-row style="text-align:right;">
                <el-button type="primary" @click="appendNewM">添加新成员</el-button>
                <el-button type="warning" @click="updateNowM">保存</el-button>
                <el-button @click="resetForm_member">重置</el-button>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
            <el-col :xs="24" :md="12">
        <el-card style="margin-top:6px">
          <div slot="header" class="clearfix">
            <span>审核员参与天数/人日数</span>
          </div>
          <el-form
            ref="elForm_days"
            :model="formDataDays"
            label-width="80px"
            label-position="right"
            :rules="rules_day"
            style="margin-top:10px"
          >
          <el-row>
            <el-col :xs="24" :md="12">
              <el-form-item label="人日数" prop="man_days">
                <el-input-number
                  v-model="formDataDays.man_days"
                  :precision="2"
                  :max="10"
                  :min="0"
                  :style="{width: '100%'}"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item label="审核天数" prop="days">
                <el-input-number
                  v-model="formDataDays.days"
                  :precision="2"
                  :max="10"
                  :min="0"
                  :style="{width: '100%'}"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
            <el-row style="text-align:right;">
                <el-button type="warning" @click="saveDays">保存</el-button>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      title="选择组员"
      :visible.sync="choseVisiable"
      :close-on-click-modal="false"
      width="80%"
      :append-to-body="true"
    >
      <Userchose ref="Userchose" :queryData="queryData" @handleChose="choseComplete"></Userchose>
    </el-dialog>
  </div>
</template>
<script>
import { getDictList } from "@/api/dict";
import Userchose from "@/views/employee/userchose";
import {
  getMemberList,
  createMember,
  updateMember,
  deleteMember,
  daysMember
} from "@/api/member";
import { genTree, deepClone } from "@/utils";
export default {
  components: { Userchose },
  props: ["certapp"],
  data() {
    return {
      listLoading: false,
      memberData: [],
      identityOptions: [],
      formDataMember: {
        user: null,
        user_: {},
        is_leader: false,
        certapp: this.certapp,
      },
      rules_member: {
        user: [
          {
            required: true,
            message: "请选择组员",
            trigger: "change",
          },
        ],
      },
      choseVisiable: false,
      queryData: {},
      formDataDays: {
        man_days: 0,
        days: 0,
      },
      rules_day: {
        man_days: [
          {
            required: true,
            message: "请输入人日数",
            trigger: "change",
          },
        ],
        days: [
          {
            required: true,
            message: "请输入审核天数",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.getMemberList_();
    this.getIdOptions()
  },
  methods: {
    getMemberList_() {
      this.listLoading = true;
      getMemberList({ certapp: this.certapp, pageoff: true })
        .then((res) => {
          this.listLoading = false;
          this.memberData = res.data;
        })
        .catch((e) => {
          this.listLoading = false;
        });
    },
    resetForm_member() {
      this.$refs["elForm_member"].resetFields();
      this.formDataMember.user_ = {};
    },
    choseMember() {
      this.choseVisiable = true;
    },
    appendNewM() {
      this.$refs["elForm_member"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        createMember(this.formDataMember).then((res) => {
          this.$message.success("成功");
          this.getMemberList_();
        }).catch(err=>{});
      });
    },
    updateNowM() {
      if (this.formDataMember.id) {
        updateMember(this.formDataMember.id, this.formDataMember).then(
          (res) => {
            this.$message.success("成功");
            this.getMemberList_();
          }
        );
      }else{
            this.$message.warning('请选择一条记录')
        }
    },
    choseComplete(val) {
      if (val) {
        this.formDataMember.user = val.user_.id;
        this.formDataMember.user_.name = val.user_.name;
      }
      this.choseVisiable = false;
    },
    handleMClick(row, c, e) {
      this.formDataMember = deepClone(row);
      this.formDataDays = deepClone(row);
    },
    getIdOptions() {
      getDictList({ type__code: "auditor_teamrole", pageoff: true }).then(
        (res) => {
          this.identityOptions = res.data;
        }
      );
    },
    saveDays() {
        if(this.formDataDays.id){
daysMember(this.formDataDays.id, {id:this.formDataDays.id,man_days:this.formDataDays.man_days,days:this.formDataDays.days}).then(res=>{
            this.getMemberList_()
            this.$message.success('成功')
        }).catch(e=>{})
        }else{
            this.$message.warning('请选择一条记录')
        }
        
    },
  },
};
</script>