<template>

  <div v-if="detailData">
    <el-row>
      <el-col :span="24">企业认证审核</el-col>
    </el-row>
    <el-row>
      <el-col :span="16">
        <el-image
          style="width: 50px; height: 50px"
          :src="detailData.verifying && detailData.verifying.icon_url"
        ></el-image>
      </el-col>
      <el-col :span="8">
        <el-button size="mini" @click="userinfo(detailData.verifying.uid)" type="info">用户信息</el-button>
        <el-button size="mini" @click="woinfo(detailData.verifying.uid)" type="info">主页</el-button>
        <el-button size="mini" @click="returnPage()" type="info">返回</el-button>
      </el-col>
    </el-row>
    <div style="height: 8px;background: #F7F7F7"></div>
    <el-row style="padding: 14px;">
      <el-col :span="18">
        <span class="h2-title">企业认证</span>
      </el-col>
      <el-col :span="5">
        <el-button size="mini">{{this.company_verify_status}}</el-button>
        <el-link @click="companyVerifyStatus(detailData.verifying.uid)" type="primary">查看详情</el-link>
      </el-col>
    </el-row>
    <div style="height: 8px;background: #F7F7F7"></div>
    <div v-if="detailData.companyInfo.base">
      <el-row style="padding: 14px;">
        <el-col :span="19">
          <span class="h2-title">基本信息</span>
        </el-col>
      </el-row>
      <div style="height: 2px;background: #F7F7F7;margin-bottom:20px;"></div>

      <el-row style="margin-left: 14px;">
        <el-col :span="2">
          <el-image style="width: 50px; height: 50px" :src="detailData.companyInfo.base.logo"></el-image>
        </el-col>
        <el-col :span="22">
          {{detailData.companyInfo.applyInfo.name}}
        </el-col>
      </el-row>
      <br>
      <el-row style="margin-left: 14px;">
        <el-col :span="4">
          <span class="title-text">企业联系人</span><span
          class="content-text">{{detailData.companyInfo.applyInfo.name}}</span>
        </el-col>
        <el-col :span="4">
          <span class="title-text">联系方式</span><span
          class="content-text">{{detailData.companyInfo.applyInfo.phone}}</span>
        </el-col>
      </el-row>
      <br>
      <el-row style="margin-left: 14px;">
        <el-col :span="20">
          <span class="title-text">企业介绍</span>
          <span class="content-text">
            {{detailData.companyInfo.base.description}}
          </span>
        </el-col>
      </el-row>
    </div>

    <div style="height: 8px;background: #F7F7F7;margin-top:10px;margin-bottom: 10px;"></div>
    <el-row>
      <el-row style="padding: 14px 20px;font-size:16px;font-weight:500;color:rgba(29,42,58,1);line-height:22px;">
        已认证解决方案
      </el-row>
      <div style="padding-left: 20px;" v-if="detailData.verifyList">
        <el-row v-for="item in detailData.verifyList" :key="item.id"
                @click.native="jumpToDetail(item)"
                style="margin-bottom:18px; padding: 10px; cursor: pointer;">
          <el-col :span="3">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.images"
            ></el-image>
          </el-col>
          <el-col :span="15">
            <h3>{{item.title}}</h3>
            <br>
            <p>方案简介:{{item.description}}</p>
            <p>成功案例:{{item.successCase || '暂未添加'}}</p>
            <p>
              <el-tag type="success"> {{item.industry_name}}</el-tag>
              <el-tag type="primary"> {{item.tech_type_name}}</el-tag>
            </p>
          </el-col>
          <el-col :span="6">
            <p>当前状态
              <el-tag type="success">{{item.status_name}}</el-tag>
            </p>
            <br>
            <p>
              <el-button size="mini" @click.stop="jumpToCheck(item)" type="info">重新审核</el-button>
            </p>
          </el-col>
        </el-row>
      </div>
    </el-row>
    <div style="height: 8px;background: #F7F7F7;margin-top:10px;margin-bottom: 10px;"></div>
    <div style="padding-left: 20px;">

      <el-row>
        <el-row style="padding: 5px;margin-bottom: 10px;">
          <span class="h2-title">当前申请</span>
        </el-row>
        <el-row
          style="padding: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); cursor: pointer"
          @click.native="jumpToDetail(detailData.verifying)"
        >
          <el-col :span="3">
            <el-image
              style="width: 100px; height: 100px"
              :src="detailData.verifying.images"
            ></el-image>
          </el-col>
          <el-col :span="15">
            <h3>{{detailData.verifying.title}}</h3>
            <br>
            <p>方案简介:{{detailData.verifying.description}}</p>
            <p>成功案例:{{detailData.verifying.successCase || '暂未添加'}}</p>
            <p>
              <el-tag type="success"> {{detailData.verifying.industry_name}}</el-tag>
              <el-tag type="primary"> {{detailData.verifying.tech_type_name}}</el-tag>
            </p>
            <p></p>
          </el-col>
          <el-col :span="6">
            <p>当前状态:
              <el-tag :type="verifying_status"> {{detailData.verifying.status_name}}</el-tag>
            </p>
            <br/>
            <el-button type="primary" @click="showEdit">修改信息</el-button>
          </el-col>
        </el-row>
      </el-row>
      <br>
      <el-row>
        <el-radio @change="refuse()" v-model="radio" label="3">拒绝</el-radio>
        <el-radio @change="pass()" v-model="radio" label="2">通过</el-radio>
      </el-row>
      <br>
      <el-row>
        <h4 style="border-bottom: solid 1px brown">邮件内容</h4>
        <el-row v-if="show" id="emailRefuseInfo">
          <p>Hi,{{detailData.verifying.nickname}},您好!</p>
          <p>谢谢您的申请</p>
          <p>您的解决方案 {{detailData.verifying.title}} 暂时不符合我们的认证标准,主要原因是:</p>
          <el-input v-model="reason" placeholder="请输入内容"></el-input>
          <p>您可以满足以上要求后,继续申请认证.</p>
          <p>谢谢您的支持!</p>
          <p>程序员客栈敬上:)</p>
        </el-row>
        <el-row v-else id="emailPassInfo">
          <p>Hi,{{detailData.verifying.nickname}},您好!</p>
          <p>恭喜您的解决方案 {{detailData.verifying.title}} 通过审核！</p>
          <p>谢谢您的支持!</p>
          <p>程序员客栈敬上:)</p>
        </el-row>
        <br>
        <el-button @click="sendEmail(detailData.verifying)" size="mini" type="primary">确定并发送邮件</el-button>
      </el-row>
    </div>
    <br>
    <el-dialog title="更新解决方案" :visible.sync="showEditStatus">
      <el-form :model="form">
        <el-form-item label="行业领域" :label-width="formLabelWidth">
          <el-select v-model="form.industry" placeholder="请选择行业领域">
            <template v-for="industry in industries">
              <el-option :label="industry['name']" :value="industry['id']"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="技术分类" :label-width="formLabelWidth">
          <el-select v-model="form.tech_type" placeholder="请选择技术分类">
            <template v-for="tech_type in tech_types">
              <el-option :label="tech_type['name']" :value="tech_type['id']"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showEditStatus = false">取 消</el-button>
        <el-button type="primary" @click="updateSolution">确 定</el-button>
      </div>
    </el-dialog>
    <el-row style="border-bottom: solid 3px green">
      审核记录
    </el-row>
    <br>
    <el-row v-for="item in detailData.audit_record" :key="item.id" style=" box-shadow: 0 2px 4px #ccc, 0 0 6px #ccc">
      <el-col :span="18"><h4 style="border-bottom: solid 1px brown;padding: 10px">{{item.status_name}}</h4></el-col>
      <el-col :span="6"><p
        style="border-bottom: solid 1px brown;padding: 10px">{{item.nickname}} {{item.audit_time}}</p></el-col>
      <p style="padding: 10px">邮件内容</p>
      <div v-html="item.audit_data" style="background-color: #ccc;padding: 10px">
        {{item.audit_data}}
      </div>
    </el-row>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        id: '',
        detailData: '',
        radio: '3',
        reason: '',
        company_verify_status: '未认证',
        show: true,
        showEditStatus: false,
        form: {},
        formLabelWidth: '120px',
        industries: [],
        tech_types: []
      }
    },
    mounted() {
      this.id = this.$route.query.id;
      this.getDetail();
      this.getOptions();
    },
    computed: {
      verifying_status() {
        if (this.detailData.verifying.status_name) {
          switch (this.detailData.verifying.status_name) {
            case "审核通过":
              return "success";
            case "审核拒绝":
              return "danger";
            default:
              return "info"

          }
        }
      },
      checked_status(name) {
        if (name) {
          switch (name) {
            case "审核通过":
              return "success";
            case "审核拒绝":
              return "danger";
            default:
              return "info"
          }
        }
      }
    },
    methods: {
      showEdit() {
        event.stopPropagation()
        this.showEditStatus = true;
      },
      async updateSolution() {
        if (!this.form.industry) {
          this.$message.error('请选择行业');
          return;
        }
        if (!this.form.tech_type) {
          this.$message.error('请选择技术类型');
        }
        let res = await this.$post('/api/admin/kaifawu/changeTag', {
          id: this.id,
          industry: this.form.industry,
          tech_type: this.form.tech_type
        });
        if (res.status === 1) {
          this.showEditStatus = false;
          this.$message.success('修改成功');
          this.getDetail();
        }
      },
      async getOptions() {
        let res = await this.$post("/api/admin/kaifawu/getOptions");
        this.industries = res.data.industries;
        this.tech_types = res.data.tech_types;
      },
      async getDetail() {
        const id = this.id;
        const page = 1;
        const data = {
          id,
          page
        };
        let res = await this.$post("/api/admin/kaifawu/getDetail", data);
        if (res && res.status === 1) {
          res.data.verifying = res.data.verifying || {}
          this.detailData = res.data
          switch (this.detailData.companyInfo.applyInfo.status) {
            case '0':
              this.company_verify_status = '未申请';
              break;
            case '1':
              this.company_verify_status = '申请中';
              break;
            case '2':
              this.company_verify_status = '通过';
              break;
            case '3':
              this.company_verify_status = '拒绝';
              break;
          }

        }
      },
      async userinfo(uid) {
        let url = window.location.href;

        window.open(this.$store.state.domainConfig.siteUrl + `/rooter/user/${uid}`)
      },
      async woinfo(uid) {
        let url = window.location.href;

        window.open(this.$store.state.domainConfig.siteUrl + `/wo/${uid}`)

      },
      async returnPage() {
        let url = window.location.href;
        window.open(`/main/solution/`, '_self')
      },
      async companyVerifyStatus(uid) {
        let url = window.location.href;

        window.open(this.$store.state.domainConfig.siteUrl + `/rooter/companyVerifyAuditItem?uid=${uid}`)

      },
      async updateStatus(item) {
        const result = 3;
        const auditData = '您的解决方案' + item.title + '审核被拒绝!';
        const data = {
          'id': item.id,
          result,
          auditData
        };
        let res = await this.$post("/api/admin/kaifawu/auditProvider", data);
        if (res && res.status === 1) {
          this.$message({
            message: '修改成功!',
            type: 'success'
          });
          this.getDetail()
        }
      },
      async sendEmail(item) {
        const result = this.radio;
        let auditData = '';
        auditData = this.reason;
        if (this.show && (this.reason.length == 0)) {
          this.$message({
            message: '请输入拒绝原因!',
            type: 'warning'
          });
          return false;
        }

        const data = {
          'id': item.id,
          result,
          auditData
        };

        let res = await this.$post("/api/admin/kaifawu/auditProvider", data);
        if (res && res.status === 1) {
          this.$message({
            message: '修改成功!',
            type: 'success'
          });
          this.getDetail()
        }
      },
      async refuse() {
        this.show = true;
      },
      async pass() {
        this.show = false;
      },
      async jumpToDetail(item) {
        console.log('item', item)
        const {id} = item
        let url = window.location.href;
        window.open(this.$store.state.domainConfig.siteUrl + `/kaifain/s/${id}.html`, '_black')
      },
      async jumpToCheck(item) {
        const {id} = item
        window.open(`/main/solution_detail?id=${id}`, '_self')
      }
    }
  }
</script>

<style lang="scss" scoped>

  .header {
    display: flex;
  }

  .title-wrapper {
    display: flex;
    align-items: center;
  }

  .title {
    line-height: 27px;
    font-weight: bold;
    font-size: 18px;
    color: #101010;
  }

  .h2-title {
    font-size: 16px;
    font-weight: 500;
    color: rgba(29, 42, 58, 1);
    line-height: 22px;

  }

  .status {
    margin-left: 6px;
    line-height: 20px;
    font-size: 14px;
  }

  .salary {
    margin-top: 13px;
    line-height: 24px;
    font-size: 16px;
    color: #101010;
  }

  .skill {
    margin-top: 8px;
    line-height: 24px;
    font-size: 16px;
    color: #101010;
  }

  .experience {
    margin-top: 8px;
    line-height: 24px;
    font-size: 16px;
    color: #101010;
  }

  .owner-wrapper {
    margin-left: 100px;
    text-align: center;
  }

  .owner-img {
    width: 53px;
    height: 53px;
    border-radius: 50%;
  }

  .owner-name {
    margin-top: 8px;
    line-height: 20px;
    font-size: 14px;
    color: #3F51B5;
  }

  .title-text {
    font-size: 13px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 18px;
    margin-right: 6px;
  }

  .content-text {
    font-size: 13px;
    color: rgba(51, 51, 51, 1);
    line-height: 18px;
    white-space: normal;
  }

  .description-wrapper {
    margin-top: 22px;
  }

  .description-title {
    line-height: 27px;
    font-weight: bold;
    font-size: 18px;
    color: #101010;
  }

  .description-content {
    margin-top: 16px;
    line-height: 24px;
    font-size: 16px;
    color: #101010;
  }
</style>
