<template>
  <div class="app-container">
    <div class="title">会 员 购 买</div>
    <div class="sub-title">该服务不支持退款</div>
    <div class="service-list">
      <el-row :gutter="30">
        <el-col :xs="12" :sm="8" :lg="6" v-for="item in goodsList" :key="item.id">
          <div class="service-item">
            <div class="service-checkbox" @click="checkboxChange(item)">
              <el-checkbox :value="currentItem === item.id"></el-checkbox>
            </div>
            <div class="service-cover">
              <el-image class="service-image" :src="handleImage(item)" :preview-src-list="handleImagePreview(item)" />
            </div>
            <div class="service-info">
              <div class="service-title">{{ item.name }}</div>
              <div class="service-time">服务时长：
                <span class="service-time-number">
                  {{ `${item.duration}` }}
                  <dict-tag :options="dict.type.buyer_duration_unit" :value="item.unit" />
                </span>
              </div>
              <div class="service-price">¥ {{ item.price }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="footer-wrap">
      <div class="purchase-btn pointer" @click="handleConfirm">
        同意协议 立即购买
        <span class="purchase-type">微信/支付宝</span>
      </div>
      <div class="notice-wrap">
        购买即视为同意
        <span class="link-type" v-for="item in agreementList" @click="previewPolicy(item)">
          <template v-if="item.type ==='2'">
            《{{ item.name }}》
          </template>
        </span>&nbsp;&nbsp;
        购买更多服务时长请联系客服
      </div>
    </div>
    <!-- 添加或修改立项管理成员对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-descriptions :column="1" v-if="type ===0">
        <el-descriptions-item label="商品名称">{{ form.name }}</el-descriptions-item>
        <el-descriptions-item label="服务时长">
          {{ form.duration }}
          <dict-tag :options="dict.type.buyer_duration_unit" :value="form.unit" />
        </el-descriptions-item>
        <el-descriptions-item label="单价(元)">{{ form.price }}</el-descriptions-item>
        <el-descriptions-item label="实付金额">{{ form.price }}</el-descriptions-item>
      </el-descriptions>
      <div class="pay-container" v-else>
        <el-button type="success">微信支付</el-button>
        <el-button type="primary">支付宝</el-button>
      </div>
      <div class="tip">提示：本服务不支持退款，请仔细核对信息</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="type===0">立即购买</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!--  协议弹窗  -->
    <el-dialog
      :title="policyTitle"
      :visible.sync="policyOpen"
      fullscreen
    >
      <span v-html="policyContent"></span>
    </el-dialog>
  </div>
</template>

<script>
import { listMember, getMember, delMember, addMember, updateMember } from '@/api/buyer/member'
import { getGoods, listGoods } from '@/api/buyer/goods'
import { addRecord, updateRecord } from '@/api/buyer/record'
import { getAgreement, listAgreement } from '@/api/buyer/agreement'

export default {
  name: 'Member',
  dicts: ['buyer_duration_unit'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 立项管理成员表格数据
      goodsList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      type: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        remarks: null,
        projectId: null,
        deptEmployeeId: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      currentItem: null,
      agreementList: [],
      policyOpen: false,
      policyContent: null,
      policyTitle: null
    }
  },
  created() {
    this.getList()
    this.getPolicyList()
  },
  methods: {
    // 查看协议内容
    previewPolicy(item) {
      const id = item.id || this.ids
      getAgreement(id).then(response => {
        this.policyContent = response.data.value
        this.policyOpen = true
        this.policyTitle = item.name
      })
    },
    /** 查询系统协议列表 */
    getPolicyList() {
      listAgreement().then(response => {
        this.agreementList = response.rows
      })
    },
    handleConfirm() {
      if (!this.currentItem) {
        this.$modal.msgWarning('请选择一项服务，再购买')
        return
      }
      getGoods(this.currentItem).then(res => {
        this.form = res.data
        this.open = true
        this.title = '确认订单'
        this.type = 0
      })
    },
    checkboxChange(item) {
      this.currentItem = item.id
    },
    handleImage(item) {
      return this.baseUrl + item.fileNames
    },
    handleImagePreview(item) {
      return [this.baseUrl + item.fileNames]
    },
    /** 查询立项管理成员列表 */
    getList() {
      this.loading = true
      listGoods().then(response => {
        this.goodsList = response.rows
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    /** 提交按钮 */
    submitForm() {
      this.type = 1
      addRecord({ goodsId: this.form.id }).then(response => {
        this.$modal.msgSuccess('提交成功')
      })
    }
  }
}
</script>
<style scoped lang="scss">
.app-container {
  padding: 38px 62px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .title {
    font-size: 48px;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: bold;
    color: #333333;
    line-height: 64px;
  }

  .sub-title {
    font-size: 16px;
    font-family: MicrosoftYaHei;
    color: #999999;
    line-height: 21px;
  }

  .service-list {
    width: 100%;
    flex: 1;
    overflow: scroll;

    &::-webkit-scrollbar {
      display: none;
    }

    .service-item {
      background: #FFFFFF;
      border-radius: 8px;
      border: 1px solid #D5D5D5;
      margin-top: 50px;
      position: relative;

      .service-checkbox {
        position: absolute;
        right: 8px;
        top: 8px;
      }

      .service-cover {
        .el-image {
          border-radius: 8px 8px 0 0;
          height: 164px;
        }
      }

      .service-info {
        padding: 12px;
      }

      .service-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #333333;
        margin-bottom: 12px;
      }

      .service-time {
        color: #666666;

        &-number {
          font-size: 18px;
          font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
          font-weight: bold;
          color: #2379DB;
          display: inline-flex;
        }
      }

      .service-price {
        font-size: 18px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: #FF0000;
        margin-top: 12px;
      }
    }
  }

  .footer-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 38px;

    .purchase-btn {
      width: 216px;
      background: #2379DB;
      border-radius: 27px;
      padding: 8px 33px;
      font-size: 18px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: #FFFFFF;
      text-align: center;

      .purchase-type {
        font-size: 12px;
        display: block;
      }
    }

    .notice-wrap {
      margin-top: 38px;
      font-size: 16px;
      font-family: MicrosoftYaHei;
      color: #333333;
    }
  }
}

.tip {
  color: #555;
  font-size: 12px;
}

.el-dialog__body {
  padding: 30px 100px;
}
</style>
