<template>
  <div class="app-container">
    <el-row :gutter="6">
            <el-col :xs="24" :md="16">
        <el-card class="box-card" style="overflow-y:auto;overflow-x:hidden;height:200px">
          <div slot="header" class="clearfix">
            <span>项目信息</span>
          </div>
          <el-col :xs="24" :md="8" >
            <el-card shadow="hover" style="height:150px">
            <div class="text item">
              <span class="span">项目号</span>
              {{project.number}}
            </div>
            <div class="text item">
              <span class="span">所属计划</span>
              <span v-if="project.plan_">{{project.plan_.name}}</span>
              <span v-else>暂无</span>
              <!-- <span class="span">项目概况</span>
            <el-tag
              v-for="(item, index) in project.certapps"
              :key="index"
              style="margin:2px;font-size:12px"
              >{{item}}</el-tag>-->
            </div>
            <div class="text item">
              <span class="span">当前状态</span>
              {{project.state}}
            </div>
            <div class="text item" v-if="project.assign_by_">
              <span class="span">任务下达人</span>
              {{project.assign_by_.name}}
            </div>
            <div class="text item" v-if="edate_.length">
              <span class="span">预计审核时间</span>
              {{edate_[0].substring(0,16)}}-{{edate_[1].substring(0,16)}}
            </div>
            <div class="text2 item" v-if="$route.name=='PlanProject'">
              <el-checkbox v-model="can_paichai" border @change="handlePaichai">可派差</el-checkbox>
            </div>
            </el-card>
          </el-col>
          <el-col :xs="24" :md="16" v-if="$route.name=='AuditProject'">
            <el-card shadow="hover" style="height:150px">
            <el-form
              ref="elForm"
              size="medium"
              label-width="120px"
              style="margin-top:2px"
              label-position="left"
            >
              <el-row :gutter="6">
                <el-col :span="16">
                  <el-form-item label="预计审核时间">
                    <el-date-picker
                      v-model="edate"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      format="yyyy-MM-dd HH:mm"
                      :style="{width: '100%'}"
                      value-format="yyyy-MM-dd HH:mm"
                      :default-time="['08:00:00', '17:00:00']"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary" @click="eDate">保存</el-button>
                </el-col>
              </el-row>
            </el-form>
            </el-card>
          </el-col>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="8">
        <el-card class="box-card" style="overflow-y:auto;overflow-x:hidden;height:200px">
          <div slot="header" class="clearfix">
            <span>受审核方</span>
            <el-button style="float: right; padding: 0px 0" type="text">更多企业信息</el-button>
          </div>
          <div class="item">{{auditee.name}}</div>

          <div v-for="item in auditee.address_" :key="item.id" class="text item">
            <span class="span">{{item.type}}</span>
            {{item.address}}
          </div>
          <div class="text item">
            <span class="span">常用联系人</span>
            {{auditee.linkman1_name}}/{{auditee.linkman1_duty}}/{{auditee.linkman1_mobile}}
          </div>
          <div class="text item">
            <span class="span">备用联系人</span>
            {{auditee.linkman2_name}}/{{auditee.linkman2_duty}}/{{auditee.linkman2_mobile}}
          </div>
        </el-card>
      </el-col>

    </el-row>
    <el-row style="margin-top:6px">
      <el-col>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>业务信息</span>
          </div>
          <el-table
            ref="projectTable"
            v-loading="listLoading"
            :data="certappData"
            style="width: 100%;"
            border
            fit
            stripe
            highlight-current-row
            max-height="300"
          >
            <el-table-column label="单号">
              <template slot-scope="scope" v-if="scope.row.number">{{ scope.row.number }}</template>
            </el-table-column>
            <el-table-column label="认证领域/分类" width="300px">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.cert_field_">{{scope.row.cert_field_.name}}</el-tag>
                <el-tag
                  v-if="scope.row.cccpv_class_"
                  type="warning"
                  style="margin:2px"
                >{{scope.row.cccpv_class_.name}}</el-tag>
              </template>
            </el-table-column>
            <!-- <el-table-column label="申请信息" width="300px">
            <template slot-scope="scope">
              <div>
                <span style="color:darkblue;font-weight:bold">申请方</span>
                :{{ scope.row.applicant_v.name }}
              </div>
              <div v-if="scope.row.manufacture">
                <span style="color:darkblue;font-weight:bold">制造商</span>
                :{{ scope.row.manufacture_v.name }}
              </div>
              <div v-if="scope.row.factory">
                <span style="color:darkblue;font-weight:bold">生产厂</span>
                :{{ scope.row.factory_v.name }}
              </div>
            </template>
            </el-table-column>-->
            <el-table-column label="当前状态">
              <template slot-scope="scope">{{ scope.row.state}}</template>
            </el-table-column>
            <el-table-column label="受理/确认人">
              <template
                slot-scope="scope"
                v-if="scope.row.accept_by_"
              >{{ scope.row.accept_by_.name}}</template>
            </el-table-column>
            <el-table-column label="创建日期">
              <template slot-scope="scope">
                <span>{{ scope.row.create_time }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="300" fixed="right">
              <template slot-scope="scope">
                  <el-button
                    v-if="$route.name == 'AuditProject'"
                    type="primary"
                    size="small"
                    :disabled="!checkPermission(['certapp_detail']) || project.state != '现场审核中'"
                    @click="handleFeedback(scope)"
                  >反馈</el-button>
                  <el-button
                    v-if="$route.name == 'PlanProject'"
                    type="primary"
                    size="small"
                    :disabled="!checkPermission(['certapp_detail']) || project.state != '策划中'"
                    @click="handlePlan(scope)"
                  >派人</el-button>
                  <el-button
                    size="small"
                    :disabled="!checkPermission(['certapp_detail'])"
                    @click="handleDetail(scope)"
                  >详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="6" style="margin-top:6px">
      <el-col :xs="24" :md="8">
        <el-card class="box-card" style="overflow-y:auto;overflow-x:hidden;height:380px">
          <div slot="header" class="clearfix">
            <span>联系记录</span>
          </div>
          <el-table
            ref="projectTable"
            v-loading="listLoading"
            :data="contactData"
            style="width: 100%;"
            border
            fit
            stripe
            highlight-current-row
            height="160"
          >
            <el-table-column label="联系时间">
              <template slot-scope="scope">{{ scope.row.contact_date }}</template>
            </el-table-column>
            <el-table-column label="内容">
              <template slot-scope="scope">{{ scope.row.content }}</template>
            </el-table-column>
            <el-table-column label="操作人">
              <template slot-scope="scope">{{ scope.row.create_by_.name }}</template>
            </el-table-column>
          </el-table>
          <el-row :gutter="10">
            <el-col :xs="24" :md="12">
              <el-form
                ref="elForm"
                :model="formData"
                :rules="rules"
                size="medium"
                label-width="80px"
                style="margin-top:2px"
                label-position="left"
              >
                <el-row>
                  <el-col>
                    <el-form-item label="联系时间" prop="contact_date">
                      <el-date-picker
                        v-model="formData.contact_date"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        :style="{width: '100%'}"
                        placeholder="联系时间"
                        clearable
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col>
                    <el-form-item label="内容" prop="content">
                      <el-input
                        v-model="formData.content"
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <div style="text-align:right;">
                    <el-button-group>
                      <el-button type="primary" @click="createNewRecord" size="mini">创建新记录</el-button>
                      <!-- <el-button type="primary" @click="updateNowRecord" size="mini">保存</el-button> -->
                      <el-button @click="resetForm" size="mini">重置</el-button>
                    </el-button-group>
                  </div>
                </el-row>
              </el-form>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-row>
                <el-card shadow="never" style="margin-top:2px">
                  <div slot="header" class="clearfix">
                    <span>常用语</span>
                  </div>
                  <el-tag
                    v-for="(item, index) in useditems"
                    :key="index"
                    @click.native="handleClickTag(item)"
                    style="margin:2px;font-size:12px"
                  >{{item}}</el-tag>
                </el-card>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="8">
        <el-card class="box-card" style="overflow-y:auto;overflow-x:hidden;height:380px">
          <div slot="header" class="clearfix">
            <span>审核组成员</span>
          </div>
          <el-table
            ref="memberTable"
            v-loading="listLoading"
            :data="memberData"
            style="width: 100%;"
            border
            fit
            stripe
            highlight-current-row
            @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>
          <!-- <el-form
            ref="elForm2"
            :model="formDataMember"
            label-width="80px"
            label-position="right"
            :rules="rules2"
            style="margin-top:2px"
            v-if="$route.name=='PlanProject'"
          >
            <el-col :xs="24" :md="12">
              <el-form-item label="成员" prop="user">
                <el-input
                  placeholder="请选择成员"
                  readonly
                  clearable
                  v-model="formDataMember.user_.name"
                >
                  <el-button slot="append" icon="el-icon-search" @click="choseMember"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item prop="is_leader">
                <el-checkbox v-model="formDataMember.is_leader">组长</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item label="身份" prop="identity">
                <el-select v-model="formDataMember.identity" placeholder="请选择">
                  <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>
            <div style="text-align:right;">
              <el-button-group>
                <el-button type="primary" @click="appendNewM" size="mini">添加新成员</el-button>
                <el-button type="warning" @click="updateNowM" size="mini">保存</el-button>
                <el-button @click="resetForm2" size="mini">重置</el-button>
              </el-button-group>
            </div>
          </el-form> -->
        </el-card>
      </el-col>
      <el-col :xs="24" :md="8">
        <el-card class="box-card" style="overflow-y:auto;overflow-x:hidden;height:380px">
          <div slot="header" class="clearfix">
            <span>审核总反馈</span>
          </div>
          <el-form
            ref="elForm"
            :model="backformData"
            size="medium"
            label-width="80px"
            style="margin-top:2px"
            label-position="top"
          >
            <el-row>
              <el-col>
                <el-form-item label="实际实施时间">
                    <el-date-picker
                      v-model="rdate"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      format="yyyy-MM-dd HH:mm"
                      :style="{width: '100%'}"
                      value-format="yyyy-MM-dd HH:mm"
                      :default-time="['08:00:00', '17:00:00']"
                    ></el-date-picker>
                  </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="法律法规合规性">
                    <el-radio v-model="backformData.is_legal" label=true>合规</el-radio>
  <el-radio v-model="backformData.is_legal" label=false>存在问题</el-radio>
                  </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="备注">
                  <el-input
                    v-model="backformData.content"
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4}"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <div style="text-align:center;" v-if="$route.name=='AuditProject'">
                <el-button-group>
                  <el-button type="primary" @click="createNewRecord" :disabled="project.state != '现场审核中'">提交反馈</el-button>
                </el-button-group>
              </div>
            </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>
<style scoped>
.text {
  font-size: 15px;
}
.el-checkbox__label {
  font-size: 18px;
}
.item {
  margin-bottom: 4px;
}
.span {
  color: gray;
  font-weight: bold;
}
</style>
<script>
import { getDictList } from "@/api/dict";
import { getCertappList } from "@/api/certapp";
import { getEnterprise } from "@/api/enterprise";
import { getProject, updateProject, edateProject } from "@/api/project";
import { getContactRecordList, createContactRecord } from "@/api/plan";
import Pagination from "@/components/Pagination";
import checkPermission from "@/utils/permission";
import Userchose from "@/views/employee/userchose";
import {
  getMemberList,
  createMember,
  updateMember,
  deleteMember,
} from "@/api/member";
import { genTree, deepClone } from "@/utils";
export default {
  components: { Pagination, Userchose },
  props: [],
  data() {
    return {
      auditee: {},
      project: { assign_by_: null },
      certappData: [],
      contactData: [],
      memberData: [],
      can_paichai: false,
      formData: {
        content: "",
        project: this.$route.query.project,
      },
      rules: {
        contact_date: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        content: [
          {
            required: true,
            message: "请输入内容",
            trigger: "change",
          },
        ],
      },
      useditems: [
        "可以,第一联系人",
        "可以,第二联系人",
        "不可以",
        "C类企业飞行检查",
      ],
      formDataMember: {
        user: null,
        user_: {},
        is_leader: false,
        project: this.$route.query.project,
      },
      rules2: {
        user: [
          {
            required: true,
            message: "请选择组员",
            trigger: "change",
          },
        ],
      },
      choseVisiable: false,
      queryData: {},
      identityOptions: [],
      edate:[],
      edate_:[],
      rdate:[],
      backformData:{
        
      }
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getParams();
    this.getMemberList_();
    this.getCertappList_();
    this.getContactRecordList_();
    this.getIdOptions();
  },
  mounted() {},
  methods: {
    checkPermission,
    getParams() {
      getProject(this.$route.params.id)
        .then((res) => {
          this.project = res.data;
          this.can_paichai = this.project.can_paichai;
          if(this.project.edate0){
            this.edate = [this.project.edate0, this.project.edate1]
            this.edate_ = [this.project.edate0, this.project.edate1]
          }
        })
        .then(() => {
          getEnterprise(this.project.auditee).then((res) => {
            this.auditee = res.data;
          });
        });
    },
    getCertappList_() {
      this.listLoading = true;
      getCertappList({
        project: this.$route.params.id,
        pageoff: true,
      }).then((res) => {
        if (res.data) {
          this.certappData = res.data;
        }
        this.listLoading = false;
      });
    },
    getIdOptions() {
      getDictList({ type__code: "auditor_teamrole", pageoff: true }).then(
        (res) => {
          this.identityOptions = res.data;
        }
      );
    },
    getContactRecordList_() {
      getContactRecordList({
        pageoff: true,
        project: this.$route.params.id,
      }).then((res) => {
        this.contactData = res.data;
      });
    },
    getMemberList_() {
      getMemberList({ certapp__project: this.$route.params.id, pageoff: true }).then(
        (res) => {
          this.memberData = res.data;
        }
      );
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    resetForm2() {
      this.$refs["elForm2"].resetFields();
      this.formDataMember.user_ = {};
    },
    handleDetail() {},
    handleClickTag(val) {
      this.formData.content = val;
    },
    createNewRecord() {
      createContactRecord(this.formData).then((rse) => {
        this.$message.success("成功");
        this.getContactRecordList_();
      });
    },
    // contactClick(scope) {
    //   this.formData.scope
    // },
    handlePaichai(val) {
      if (val) {
        this.$confirm("确定标记为可派差?", "提示", {})
          .then(() => {
            updateProject(this.$route.params.id, {
              can_paichai: true,
            }).then((res) => {
              this.$message.success("成功");
            });
          })
          .catch((res) => {
            this.can_paichai = false;
          });
      } else {
        this.$confirm("取消派差标记?", "警告", { type: "warning" })
          .then(() => {
            this.$message.success("未写接口");
            this.can_paichai = true;
          })
          .catch((res) => {
            this.can_paichai = true;
          });
      }
    },
    choseMember() {
      this.choseVisiable = true;
    },
    appendNewM() {
      this.$refs["elForm2"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        createMember(this.formDataMember).then((res) => {
          this.$message.success("成功");
          this.getMemberList_();
        });
      });
    },
    updateNowM() {
      if (this.formDataMember.id) {
        updateMember(this.formDataMember.id, this.formDataMember).then(
          (res) => {
            this.$message.success("成功");
            this.getMemberList_();
          }
        );
      }
    },
    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);
    },
    eDate(){
      if(this.edate.length){
        edateProject(this.project.id, {edate0:this.edate[0], edate1:this.edate[1]}).then(res=>{
          this.$message.success('成功')
          this.edate_ = this.edate
        }).catch(e=>{})
      }
    },
    handleFeedback(scope){
      this.$router.push({name:"Certappfeedback", params:{action:'feedback', id:scope.row.id}})
    },
    handlePlan(scope){
      this.$router.push({name:"Certappmember", params:{action:'member', id:scope.row.id}})
    },
    handleDetail(scope){
      this.$router.push({name:"Certappdetail", params:{id:scope.row.id}})
    }
  },
};
</script>