<template>
  <ai-detail class="ActiveDetail">
    <template #title>
      <ai-title title="活动详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
    </template>

    <template #content>
      <el-tabs v-model="activeName" tabPosition="left">
        <el-tab-pane label="活动信息" name="active">
          <div class="title">
            <div class="hint">{{ formData.title }}</div>
            <ai-wrapper label-width="60px" :columnsNumber="2">
              <ai-info-item label="创建时间">
                <span>{{ formData.createDate }}</span>
              </ai-info-item>

              <ai-info-item label="创建人">
                <span>{{ formData.createUserName }}</span>
              </ai-info-item>

              <ai-info-item label="发布地区" style="width:100%">
                <span>{{ formData.areaName }}</span>
              </ai-info-item>

              <ai-info-item label="报名状态">
                <span style="color:green" v-if="formData.signupStatus == 0">{{ dict.getLabel('partyReportSignupStatus', formData.signupStatus) }}</span>

                <span style="color:red" v-else>{{ dict.getLabel('partyReportSignupStatus', formData.signupStatus) }}</span>
              </ai-info-item>

              <ai-info-item label="活动状态">
                <span style="color:#FDB27B" v-if="formData.actionStatus == 0">{{ dict.getLabel('partyReportActionStatus', formData.actionStatus) }}</span>

                <span style="color:#588BFB" v-else-if="formData.actionStatus == 1">{{ dict.getLabel('partyReportActionStatus', formData.actionStatus) }}</span>

                <span style="color:#B0B0B0" v-else>{{ dict.getLabel('partyReportActionStatus', formData.actionStatus) }}</span>
              </ai-info-item>

              <ai-info-item label="活动时间" style="width:100%">
                <span>{{ formData.beginTime }}至{{ formData.endTime }}</span>
              </ai-info-item>

              <ai-info-item label="活动地点">
                <span>{{ formData.address }}</span>
              </ai-info-item>

              <ai-info-item label="参与名额" style="width:100%">
                <span v-if="formData.total == '0'">不限</span>
                <span v-else>{{ formData.total }}</span>
              </ai-info-item>

              <ai-info-item label="截止时间">
                <span>{{ formData.stopSignupTime }}</span>
              </ai-info-item>

              <ai-info-item label="报名人数">
                <span>{{ formData.signupCount }}</span>
              </ai-info-item>

              <ai-info-item label="联系人">
                <span>{{ formData.contactPerson }}</span>
              </ai-info-item>

              <ai-info-item label="联系电话">
                <span>{{ formData.contactPhone }}</span>
              </ai-info-item>
            </ai-wrapper>
          </div>

          <div class="content">
            <div class="hint">活动介绍</div>
            <div class="presentation" v-html="formData.content"></div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="报名情况" name="apply">
          <div class="hint">报名情况</div>

          <div>
            <div class="total">
              共<span class="Number">&nbsp; {{ totals.total }} &nbsp;</span>人报名
            </div>

            <ai-table class="ai-table" :tableData="formes" :col-configs="colConfiges" :total="total" :border="true" :current.sync="page.current" :size.sync="page.size" @getList="getInfoList" :dict="dict">
              <el-table-column slot="signupTime" label="报名时间" align="center">
                <template slot-scope="{ row }">{{ row.signupTime.substring(0, 10) }} </template>
              </el-table-column>

              <el-table-column slot="remark" label="报名备注" width="150px" align="center">
                <template slot-scope="{ row }">
                  <el-tooltip>
                    <div slot="content" style="max-width: 850px;">{{ row.remark }}</div>
                    <div style=" overflow: hidden;text-overflow: ellipsis; white-space: nowrap;">
                      {{ row.remark }}
                    </div>
                  </el-tooltip>
                </template>
              </el-table-column>

              <el-table-column slot="partyName" label="报名人员资料" width="200px">
                <template slot-scope="{ row }">
                  <span v-if="row.partyName">{{ row.partyName }}-{{ row.phone }} <br />{{ row.partyOrgName }}</span>
                  <span v-else>{{ row.residentName }}-{{ row.phone }}<br />{{ row.partyOrgName }}</span>
                </template>
              </el-table-column>

              <el-table-column slot="options" label="操作" fixed="right" width="100">
                <template slot-scope="{ row }">
                  <el-button type="text" @click="check(row.id)" v-if="row.logStatus == 1">审核日志</el-button>
                </template>
              </el-table-column>
            </ai-table>
          </div>
        </el-tab-pane>
      </el-tabs>

      <ai-dialog title="查看活动日志" :visible.sync="dialogVisible" @onConfirm="report(forms.id)" @onCancel="onCancel" width="35%">
        <ai-wrapper>
          <div class="con">
            <ai-info-item label="提交人">
              <span v-if="forms.partyName">{{ forms.partyName }}</span>
              <span v-else>{{ forms.residentName }}</span>
            </ai-info-item>

            <ai-info-item label="提交时间">
              <span>{{ forms.submitTime }}</span>
            </ai-info-item>
          </div>

          <ai-info-item label="活动总结">
            <span>{{ forms.content }}</span>
          </ai-info-item>

          <ai-info-item label="活动照片" style="width:100%" class="photos">
            <div v-viewer="{ movable: true }">
              <img v-for="(item, i) in forms.files" :key="i" :src="item.accessUrl" style="width: 100px;height: 100px;margin-left: 5px;" />
            </div>
          </ai-info-item>

          <ai-info-item label="审核结果">
            <el-radio-group v-model="logStatus">
              <el-radio :label="2">合格</el-radio>
              <el-radio :label="3">不合格</el-radio>
            </el-radio-group>
          </ai-info-item>
        </ai-wrapper>
      </ai-dialog>
    </template>
  </ai-detail>
</template>

<script>
export default {
  name: 'ActiveDetail',
  components: {},
  props: {
    instance: Function,
    dict: Object,
    params: Object,
  },
  data() {
    return {
      logStatus: 2,
      activeName: 'active',
      formData: [],
      form: [],
      forms: {},
      totalList: '',
      dialogVisible: false,
      id: '',
      formes: [],
      colConfiges: [
        { slot: 'signupTime', align: 'center' },
        {
          slot: 'partyName',
          align: 'left',
        },
        { prop: 'reportType', label: '活动报道类型', align: 'center', dict: 'partyReportSignupReportType' },
        { slot: 'remark', align: 'center' },
        {
          prop: 'status',
          label: '报名状态',
          align: 'center',
          dict: 'partyReportPersonSignupStatus',
        },
        {
          prop: 'logStatus',
          label: '活动日志',
          align: 'center',
          dict: 'partyReportSignupLogStatus',
        },
      ],
      page: {
        size: 10,
        current: 1,
      },
      total: 0,
      totals: [],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.dict.load('partyReportSignupStatus', 'partyReportActionStatus', 'partyReportSignupReportType', 'partyReportPersonSignupStatus', 'partyReportSignupLogStatus').then(() => {})

    if (this.params && this.params.id) {
      this.id = this.params.id
      this.getList()
      this.getInfoList()
    }
  },
  mounted() {},
  methods: {
    getList() {
      this.instance.post(`/app/apppartyreport/queryDetailById?id=${this.id}`).then((res) => {
        if (res.code == 0) {
          this.formData = res.data
        }
      })
    },

    getInfoList() {
      this.instance
        .post(`/app/apppartyreport/signupInfoPage`, null, {
          params: {
            ...this.page,
            id: this.id,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.formes = res.data.records
            this.total = res.data.total
            this.totals = res.data
            if (this.formes) {
              this.formes.map((item) => {
                item.signupTime = item.signupTime.substring(0, 10)
              })
            }
          }
        })
    },

    check(id) {
      this.instance.post(`/app/apppartyreport/log?id=${id}`).then((res) => {
        if (res.code == 0) {
          this.forms = res.data
          this.dialogVisible = true
        }
      })
    },

    report(id) {
      this.instance
        .post(`/app/apppartyreport/log-check`, {
          id,
          logStatus: this.logStatus,
        })
        .then((res) => {
          if (res.code == 0) {
            this.form = res.data
            this.getInfoList()
            this.dialogVisible = false
          }
        })
    },

    onCancel() {
      this.dialogVisible = false
    },

    // 返回按钮
    cancel(isRefresh) {
      this.$emit('change', {
        type: 'list',
        isRefresh: isRefresh ? true : false,
      })
    },
  },
}
</script>

<style scoped lang="scss">
.ActiveDetail {
  .el-tabs {
    margin-top: 20px;
    ::v-deep.el-tabs__header {
      .el-tabs__nav-wrap {
        .el-tabs__nav {
          border: 1px solid #d7d8db;
          .el-tabs__item {
            margin-right: 50px;
          }
        }
      }
    }
    ::v-deep.el-tabs__content {
      margin-left: 50px;
      .el-tab-pane:first-child {
        margin-bottom: 100px;
        .title {
          background-color: #fff;
          padding: 0 16px 16px 16px;
          box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
          border-radius: 2px;
          .hint {
            height: 50px;
            line-height: 50px;
            color: #000;
            border-bottom: 1px solid #d8dce3;
            font-weight: 800;
          }
          .ai-wrapper {
            margin-top: 10px;
          }
        }
        .content {
          margin-top: 15px;
          background-color: #fff;
          padding: 0 16px 16px 16px;
          box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
          border-radius: 2px;
          .hint {
            height: 50px;
            line-height: 50px;
            color: #000;
            border-bottom: 1px solid #d8dce3;
            font-weight: 800;
          }
          .presentation {
            padding: 5px;
            border-bottom: none;
            line-height: 40px;
            color: #000;
            img {
              display: block;
            }
          }
        }
      }

      .el-tab-pane:nth-child(2) {
        background-color: #fff;
        padding: 16px;
        box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
        border-radius: 2px;
        margin-bottom: 16px;
        .total {
          line-height: 30px;
          font-size: 14px;
          color: #adadad;
          .Number {
            color: #719ffc;
          }
        }
        .ai-table {
          .el-table {
            .el-table__body-wrapper {
              .el-table__body {
                tr {
                  td:first-child {
                    .cell {
                      padding-left: 0 !important;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .ai-dialog__wrapper {
    ::v-deep.el-dialog {
      .el-dialog__body {
        .ai-wrapper {
          .con {
            width: 100%;
            display: flex;
            justify-content: space-between;
          }
          .ai-info-item {
            width: 100% !important;
          }
        }
      }
    }
  }
}
</style>
