<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane name="consult">
        <span slot="label" class="nofont" :class="{font:activeName=='consult'}">{{ $t('consult.consult') }}</span>
        <el-form ref="consultForm" v-loading="consultLoading" :model="consultForm" label-width="80px" style="margin-top: 20px;">
          <el-row>
            <el-col :span="12">
              <el-form-item
                :label="$t('consult.title')"
                prop="title"
                :rules="[
                  { required: true, message: $t('consult.titleRules')}
                ]"
              >
                <el-input v-model="consultForm.title" :placeholder="$t('consult.titleNotice')" class="input" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t('consult.name')"
                prop="name"
                :rules="[
                  { required: true, message: $t('consult.nameRules')}
                ]"
              >
                <el-input v-model="consultForm.name" readonly :placeholder="$t('consult.nameNotice')" class="input" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('consult.consult')">
                <el-radio v-model="consultForm.type" :label="2">{{ $t('consult.type2') }}</el-radio>
                <el-radio v-model="consultForm.type" :label="1">{{ $t('consult.type1') }}</el-radio>
              </el-form-item>
            </el-col>
            <el-col
              :span="12"
            >
              <el-form-item
                :label="$t('consult.phone')"
                prop="phone"
                :rules="[
                  { required: true, message: $t('consult.phoneRules')}
                ]"
              >
                <el-input v-model.number="consultForm.phone" readonly :placeholder="$t('consult.phoneNotice')" class="input" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('consult.orderCode')" prop="orderCode">
                <el-input v-model="consultForm.orderCode" :placeholder="$t('consult.orderCodeRules')" class="input" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <div style="display: flex;margin-left: 67px;">
                <img src="@/assets/advice/notice.png" alt style="width: 26px;height: 26px;margin-left: 17px;">
                <span style="font-size: 12px;font-weight: 400;color: #999999;line-height: 26px;margin-left:5px">{{ $t('consult.notice') }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item
                :label="$t('consult.content')"
                prop="content"
                label-width="700"
                :rules="[
                  { required: true, message: $t('consult.contentRules')}
                ]"
              >
                <el-input v-model="consultForm.content" type="textarea" :rows="4" :placeholder="$t('consult.contentNotice')" class="input" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="display: flex;margin-top: 16px;justify-content: center;">
          <div class="reload" @click="consultReload">{{ $t('common.reload') }}</div>
          <div class="submit" @click="consultSubmit">{{ $t('consult.submit') }}</div>
        </div>
        <div v-if="complaintTotal > 0" style="display: flex;margin-top: 36px;">
          <img src="@/assets/advice/logs.png" alt style="width: 34px;height: 34px;margin-top: 10px;margin-left: 17px;">
          <span style="font-size: 22px;font-weight: 500;color: #333333;line-height:55px;margin-left:20px">{{ $t('consult.record') }}</span>
        </div>
        <el-card v-for="item in consultList" :key="item.id" style="margin-top: 20px;margin-left: 20px;" shadow="always">
          <el-row :gutter="20">
            <el-col :span="12">{{ $t('consult.title') }}：{{ item.title }}</el-col>
            <el-col :span="12">{{ $t('consult.consultName') }}：{{ item.name }}</el-col>
          </el-row>
          <el-divider />
          <el-row :gutter="20">
            <el-col :span="12">{{ $t('consult.phone') }}：{{ item.phone }}</el-col>
            <el-col :span="12">{{ $t('consult.createTime') }}：{{ parseTime(item.createTime) }}</el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col :span="2">{{ $t('consult.content') }}：</el-col>
            <el-col :span="20">{{ item.content }}</el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col :span="2">{{ $t('consult.status') }}：</el-col>
            <el-col v-if="item.status==1" :span="16">{{ $t('consult.status1') }}</el-col>
            <el-col v-if="item.status==2" :span="16">{{ $t('consult.status3') }}</el-col>
          </el-row>
          <el-divider v-if="item.status == 2" />
          <el-row v-if="item.status == 2">
            <el-col :span="24">{{ $t('consult.replyContent') }}：{{ item.replyContent }}</el-col>
          </el-row>
          <el-divider v-if="item.status == 2" />
          <el-row v-if="item.status == 2">
            <el-col :span="24">{{ $t('consult.replyTime') }}：{{ parseTime(item.replyTime) }}</el-col>
          </el-row>
        </el-card>
        <pagination
          v-if="consultTotal > 0"
          :total="consultTotal"
          :page.sync="consultParams.page"
          :limit.sync="consultParams.rows"
          @pagination="getConsultList"
        />
      </el-tab-pane>
      <el-tab-pane name="complaint">
        <span slot="label" class="nofont" :class="{font:activeName=='complaint'}">{{ $t('complaint.complaint') }}</span>
        <el-form ref="complaintForm" v-loading="complaintLoading" :model="complaintForm" label-width="80px" style="margin-top: 20px;">
          <el-row>
            <el-col :span="12">
              <el-form-item
                :label="$t('complaint.title')"
                prop="title"
                :rules="[
                  { required: true, message: $t('complaint.titleRules')}
                ]"
              >
                <el-input v-model="complaintForm.title" :placeholder="$t('complaint.titleNotice')" class="input" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t('complaint.name')"
                prop="contacter"
                :rules="[
                  { required: true, message: $t('complaint.nameRules')}
                ]"
              >
                <el-input v-model="complaintForm.contacter" readonly :placeholder="$t('complaint.nameNotice')" class="input" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                :label="$t('complaint.type')"
                prop="type"
                :rules="[
                  { required: true, message: $t('complaint.typeRules')}
                ]"
              >
                <el-select v-model="complaintForm.type" :placeholder="$t('complaint.typeNotice')" clearable size="small">
                  <el-option
                    v-for="dict in typeData"
                    :key="dict.value"
                    :label="$l(dict, 'label')"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t('complaint.phone')"
                prop="contactPhone"
                :rules="[
                  { required: true, message: $t('complaint.phoneRules')}
                ]"
              >
                <el-input v-model.number="complaintForm.contactPhone" readonly :placeholder="$t('complaint.phoneNotice')" class="input" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('complaint.orderCode')" prop="orderId">
                <el-input v-model="complaintForm.orderId" :placeholder="$t('complaint.orderCodeRules')" class="input" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <div style="display: flex;margin-left: 67px;">
                <img src="@/assets/advice/notice.png" alt style="width: 26px;height: 26px;margin-left: 17px;">
                <span style="font-size: 12px;font-weight: 400;color: #999999;line-height: 26px;margin-left:5px">{{ $t('complaint.notice') }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item
                :label="$t('complaint.content')"
                prop="content"
                label-width="700"
                :rules="[
                  { required: true, message: $t('complaint.contentRules')}
                ]"
              >
                <el-input v-model="complaintForm.content" type="textarea" :rows="4" :placeholder="$t('complaint.contentNotice')" class="input" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="display: flex;margin-top: 16px;justify-content: center;">
          <div class="reload" @click="complaintReload">{{ $t('common.reload') }}</div>
          <div class="submit" @click="complaintSubmit">{{ $t('complaint.submit') }}</div>
        </div>
        <div v-if="complaintTotal > 0" style="display: flex;margin-top: 36px;">
          <img src="@/assets/advice/complaint.png" alt style="width: 34px;height: 34px;margin-top: 10px;margin-left: 17px;">
          <span style="font-size: 22px;font-weight: 500;color: #333333;line-height:55px;margin-left:20px">{{ $t('complaint.record') }}</span>
        </div>
        <el-card v-for="(item, index) in complaintList" :key="item.id" shadow="always" style="margin-top: 40px;margin-left: 20px;">
          <el-row>
            <el-col :span="12">{{ index+1 }}.{{ $t('complaint.complaintName') }}：{{ item.contacter }}</el-col>
            <el-col :span="12">{{ $t('complaint.createTime') }}：{{ parseTime(item.createTime) }}</el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col :span="8">{{ $t('complaint.title') }}：{{ item.title }}</el-col>
            <el-col :span="8">{{ $t('complaint.type') }}：<dict-tag :type="DICT_TYPE. CUSTOMER_COMPLAINT_TYPE" :value="item.type" /></el-col>
            <el-col :span="8">{{ $t('complaint.orderCode') }}：{{ item.orderId }}</el-col>
          </el-row>
          <el-divider />
          <el-row style="display: flex;justify-content: space-between;">
            <el-col :span="4">{{ $t('complaint.content') }}：</el-col>
            <el-col :span="20">{{ item.content }}</el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col :span="4">{{ $t('complaint.status') }}：</el-col>
            <el-col v-if="item.status==1" :span="16">{{ $t('complaint.status1') }}</el-col>
            <el-col v-if="item.status==2" :span="16">{{ $t('complaint.status2') }}</el-col>
            <el-col v-if="item.status==3" :span="16">{{ $t('complaint.status3') }}</el-col>
            <el-col v-if="item.status==4" :span="16">{{ $t('complaint.status4') }}</el-col>
          </el-row>
          <el-divider v-if="item.status == 3" />
          <el-row v-if="item.status == 3">
            <el-col :span="24">{{ $t('complaint.replyContent') }}：{{ item.result }}</el-col>
          </el-row>
          <el-divider v-if="item.status == 3" />
          <el-row v-if="item.status == 3">
            <el-col :span="24">{{ $t('complaint.replyTime') }}：{{ parseTime(item.handleAt) }}</el-col>
          </el-row>
        </el-card>
        <pagination
          v-if="complaintTotal > 0"
          :total="complaintTotal"
          :page.sync="complaintParams.page"
          :limit.sync="complaintParams.rows"
          @pagination="getComplaintList"
        />
        <div v-if="false">
          <img src="@/assets/advice/bottom.png" alt object-fit="cover" style="width: 720px;height: 126px;margin-bottom: 20px">
          <span style="position:relative;font-size: 14px;font-weight: 500;color: #333333;line-height: 48px;bottom: 110px;left: 130px">尊敬的用户您好，已收到您的投诉信息，我们将立即核查，尽快给到您处理结果</span>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { createLeave, createComplaint, getConsultList, getComplaintList } from '@/api/message'
import { getData } from '@/api/data'
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils'
import DictTag from '@/components/DictTag'
import { mapGetters } from 'vuex'
export default {
  components: {
    Pagination,
    DictTag
  },
  data() {
    const loginUser = this.loginUser
    console.log(loginUser)
    return {
      parseTime,
      activeName: 'consult',
      consultForm: {
        title: '',
        name: '',
        type: 2,
        phone: '',
        orderCode: '',
        content: ''
      },
      consultLoading: false,
      consultList: [],
      complaintForm: {
        title: '',
        contacter: '',
        type: '',
        contactPhone: '',
        orderId: '',
        content: ''
      },
      complaintLoading: false,
      complaintList: [],
      consultTotal: 0,
      // 查询参数
      consultParams: {
        page: 1,
        rows: 10,
        creator: null,
        sort: null,
        status: null
      },
      complaintTotal: 0,
      // 查询参数
      complaintParams: {
        page: 1,
        rows: 10,
        creator: null,
        sort: null,
        status: null
      },
      typeData: []
    }
  },
  computed: {
    ...mapGetters(['loginUser'])
  },
  watch: {
    $route: {
      handler(val) {
        this.activeName = this.$route.query.type
        this.$set(this.consultForm, 'type', Number(this.$route.query.dtype))
      },
      deep: true
    }
  },
  created() {
    this.complaintParams.creator = this.loginUser.id
    this.complaintForm.contactPhone = this.loginUser.mobile
    this.complaintForm.contacter = this.loginUser.nickname
    this.consultParams.creator = this.loginUser.id
    this.consultForm.phone = this.loginUser.mobile
    this.consultForm.name = this.loginUser.nickname
    this.getConsultList()
    this.getComplaintList()
    if (this.$route.query.type) {
      this.activeName = this.$route.query.type
    }
    if (this.$route.query.dtype) {
      this.$set(this.consultForm, 'type', Number(this.$route.query.dtype))
    }
    getData({ page: 1, rows: 100, dictType: 'customer_complaint_type' }).then(r => {
      this.typeData = r.data.list
    })
  },
  methods: {
    getConsultList() {
      getConsultList(this.consultParams).then(r => {
        this.consultList = r.data.list
        this.consultTotal = r.data.total
      })
    },
    getComplaintList() {
      getComplaintList(this.complaintParams).then(r => {
        this.complaintList = r.data.list
        this.complaintTotal = r.data.total
      })
    },
    consultSubmit() {
      this.$refs.consultForm.validate((valid) => {
        if (valid) {
          this.consultLoading = true
          createLeave(this.consultForm).then(() => {
            this.consultLoading = false
            this.consultReload()
            this.$message({
              message: this.$t('common.success'),
              type: 'success'
            })
            this.$nextTick(() => {
              this.getConsultList()
            })
          }).catch(() => {
            this.consultLoading = false
          })
        }
      })
    },
    consultReload() {
      this.$refs['consultForm'].resetFields()
    },
    complaintSubmit() {
      this.$refs.complaintForm.validate((valid) => {
        if (valid) {
          this.complaintLoading = true
          createComplaint(this.complaintForm).then(() => {
            this.complaintLoading = false
            this.complaintReload()
            this.$message({
              message: this.$t('common.success'),
              type: 'success'
            })
            this.$nextTick(() => {
              this.getComplaintList()
            })
          }).catch(() => {
            this.complaintLoading = false
          })
        }
      })
    },
    complaintReload() {
      this.$refs['complaintForm'].resetFields()
    }
  }
}
</script>

<style scoped>
.nofont{
  font-size: 19px;
}
.font{
  color: #659FD5;
  font-size: 22px;
}
.reload{
  width: 208px;
  height: 38px;
  border: 2px solid #659FD5;
  border-radius: 24px;
  font-size: 14px;
  font-weight: bold;
  color: #5BA8DC;
  text-align: center;
  line-height: 35px;
  cursor:pointer
}
.submit{
  width: 208px;
  height: 38px;
  border: 2px solid #659FD5;
  border-radius: 24px;
  background: #5BA8DC;
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  line-height: 35px;
  margin-left: 20px;
  cursor:pointer
}
::v-deep el-radio__label{
  font-size: 18px;
}
</style>
