<template>
  <div id="zhanjiaduijie">
    <el-row>
      <el-col :span="24" class="style">
        <el-image :src="beijingPic"></el-image>
        <el-col :span="24" class="info">
          <div class="w_1200">
            <el-col :span="24" class="topTitle">
              <p>{{ dockInfo.title }}</p>
              <p>主办方：{{ dockInfo.sponsor }}</p>
            </el-col>
            <el-col :span="24" class="main">
              <el-col :span="24" class="btn">
                <el-button type="primary" size="mini" @click="back()">返回</el-button>
              </el-col>
              <el-col :span="24">
                <expeDetail :detailInfo="detailInfo" @onSubmit="onSubmit" :displayBtn="displayBtn"></expeDetail>
              </el-col>
              <!-- <el-col :span="24" class="top">
                <el-col :span="8" class="left">
                  <el-image v-if="detailInfo.expertimage != ''" :src="detailInfo.expertimage" style="width:100%;height:220px;"></el-image>
                  <el-image v-else :src="expertimage" style="width:100%;height:220px;"></el-image>
                </el-col>
                <el-col :span="16" class="right">
                  <el-col :span="24" class="name textOver">
                    {{ detailInfo.name }}
                  </el-col>
                  <el-col :span="12" class="otherInfo textOver"> 毕业院校：{{ detailInfo.school }} </el-col>
                  <el-col :span="12" class="otherInfo textOver"> 最高学历：{{ detailInfo.education }} </el-col>
                  <el-col :span="12" class="otherInfo textOver"> 出生日期：{{ detailInfo.birthDate }} </el-col>
                  <el-col :span="12" class="otherInfo textOver"> 工作单位：{{ detailInfo.company }} </el-col>
                  <el-col :span="12" class="otherInfo textOver"> QQ/微信：{{ detailInfo.qqwx }} </el-col>
                  <el-col :span="12" class="otherInfo textOver"> 电子邮箱：{{ detailInfo.email }} </el-col>
                  <el-col :span="12" class="otherInfo textOver"> 职务职称：{{ detailInfo.zwzc }} </el-col>
                  <el-col :span="12" class="otherInfo textOver"> 擅长领域：{{ detailInfo.expertise }} </el-col>
                </el-col>
              </el-col>
              <el-col :span="24" class="down">
                <el-col :span="24" class="downInfo">
                  <h2>工作经历：</h2>
                  <p>
                    {{ detailInfo.workexperience || '暂无' }}
                  </p>
                </el-col>
                <el-col :span="24" class="downInfo">
                  <h2>科研综述：</h2>
                  <p>
                    {{ detailInfo.scientific || '暂无' }}
                  </p>
                </el-col>
                <el-col :span="24" class="downInfo">
                  <h2>承担项目：</h2>
                  <p>
                    {{ detailInfo.undertakingproject || '暂无' }}
                  </p>
                </el-col>
                <el-col :span="24" class="downInfo">
                  <h2>科技奖励：</h2>
                  <p>
                    {{ detailInfo.scienceaward || '暂无' }}
                  </p>
                </el-col>
                <el-col :span="24" class="downInfo">
                  <h2>社会任职：</h2>
                  <p>
                    {{ detailInfo.social || '暂无' }}
                  </p>
                </el-col>
              </el-col>
              <el-col :span="24" class="anniu">
                <el-button type="primary" size="mini" v-if="this.user.uid != detailInfo.userid" @click="btnPhone()">对接</el-button>
                <el-button type="success" size="mini" v-if="this.user.uid != detailInfo.userid" @click="onSubmit()">洽谈</el-button>
              </el-col> -->
            </el-col>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="对接" :visible.sync="dialogTableVisible">
      <chat :room="room"></chat>
    </el-dialog>
  </div>
</template>

<script>
import expeDetail from '@/views/market/detail/expeDetail.vue';
import _ from 'lodash';
import { mapState, createNamespacedHelpers } from 'vuex';
import chat from './parts/chat.vue';
const { mapActions: dock } = createNamespacedHelpers('dock');
const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
const { mapActions: personalRoom } = createNamespacedHelpers('personalroom');
const { mapActions: transaction } = createNamespacedHelpers('transaction');
export default {
  name: 'zhanjiaduijie',
  props: {},
  components: {
    chat,
    expeDetail,
  },
  data: function() {
    return {
      beijingPic: require('@a/live/top_3.png'),
      expertimage: require('@/assets/live/222.png'),
      dock_id: '',
      dockInfo: {},
      // 专家详情
      detailInfo: {},
      // 对接
      dialogTableVisible: false,
      room: {},
      // 显示按钮
      displayBtn: true,
    };
  },
  created() {
    this.$set(this, `dock_id`, this.$route.query.dockid);
    this.search();
  },
  methods: {
    ...dock({ dockQuery: 'query', dockFetch: 'fetch' }),
    ...expertsuser(['fetch']),
    ...personalRoom(['create', 'countDelete']),
    ...transaction({ buyProduct: 'create' }),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      let res = await this.dockFetch(this.dock_id);
      this.$set(this, `dockInfo`, res.data);
      res = await this.fetch(this.$route.query.id);
      if (res.errcode === 0) {
        this.$set(this, `detailInfo`, res.data);
      }
    },
    // 对接
    async btnPhone() {
      if (!this.room.id) {
        //TODO 请求房间号
        let obj = {};
        if (!this.user.uid) {
          // this.$message.error('游客身份无法与卖家对话,请先注册');
          this.$message({
            dangerouslyUseHTMLString: true,
            message: '<strong><a href="http://free.liaoningdoupo.com/platlive/webLogin" style="color:red;">游客身份无法与卖家对话,请先注册</a></strong>',
            type: 'error',
          });
          return;
        } else {
          obj.buyer_id = this.user.uid;
          obj.buyer_name = this.user.name;
        }
        if (!this.detailInfo.id) {
          this.$message.error('缺少卖家信息,请联系卖家或管理员');
          return;
        } else {
          obj.seller_id = this.detailInfo.userid;
          obj.seller_name = this.detailInfo.name;
        }
        let res = await this.create(obj);
        if (this.$checkRes(res)) {
          this.$set(this, `room`, res.data);
        }
      }
      this.dialogTableVisible = true;
    },
    // 洽谈
    async onSubmit() {
      let data = this.detailInfo;
      let form = {
        userid: this.user.uid,
        username: this.user.name,
        product_id: data.id,
        product_name: data.name,
        market_userid: data.id,
        market_username: data.name,
        status: '0',
        type: '1',
      };
      if (!this.user.uid) {
        // this.$message.error('游客身份无法与卖家对话,请先注册');
        this.$message({
          dangerouslyUseHTMLString: true,
          message: '<strong><a href="http://free.liaoningdoupo.com/platlive/webLogin" style="color:red;">游客身份无法与卖家对话,请先注册</a></strong>',
          type: 'error',
        });
        return;
      } else {
        let res = await this.buyProduct(form);
        this.$checkRes(res, '购买申请成功', res.errmsg || '购买申请失败');
      }
    },
    // 返回
    back() {
      history.back();
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.style {
  height: 100vh;
}
.style .info {
  position: relative;
  top: -450px;
}
.style .topTitle {
  position: relative;
  top: 0;
  width: 100%;
  text-align: center;
  z-index: 999;
  height: 172px;
  margin: 0 0 20px 0;
}
.style .topTitle p:first-child {
  font-size: 50px;
  color: #fff;
}
.style .topTitle p:last-child {
  font-size: 30px;
  color: #fff;
  position: absolute;
  width: 100%;
  top: 135px;
}
.style .main {
  min-height: 600px;
  border: 1px solid red;
  background: #fff;
  padding: 30px 20px;
  .btn {
    text-align: right;
  }
  .top {
    height: 230px;
    overflow: hidden;
    border-bottom: 1px dashed #ccc;
    // .left {
    // }
    .right {
      padding: 0 10px;
      .name {
        font-size: 18px;
        font-weight: bold;
        padding: 10px 0;
      }
      .otherInfo {
        font-size: 16px;
        padding: 10px 0;
      }
    }
  }
  .down {
    .downInfo {
      padding: 10px 0;
      p {
        font-size: 16px;
        text-indent: 2rem;
      }
    }
  }
  .anniu {
    text-align: center;
    /deep/.el-button {
      margin: 0 10px;
    }
  }
}
</style>
