<template>
  <div :class="isWidth800? 'ServiceReviewPhone':'ServiceReviewPc'">
    <div id="ServiceWarp" :class="!isWidth800?'ServiceWarpPC':''">
      <div id="ServiceHeader" v-if="!isWidth800">
        服务评价
      </div>
      <div id="ServiceContext" :class="!isWidth800?'ServiceContext':''" v-if="!submittedStatus">
        <a-row id="ServiceContextTitle" v-if="!isWidth800">
          <a-col :span="8">
            <span class="ServiceContextLabel">业务名称</span>
            <span>入户安检</span>
          </a-col>
          <a-col :span="8" style="text-align: center">
            <span class="ServiceContextLabel">办理时间</span>
            <span>2023-12-12</span>
          </a-col>
          <a-col :span="8" style="text-align: right">
            <span class="ServiceContextLabel">办理人员</span>
            <span>某某某</span>
          </a-col>
        </a-row>
        <a-row id="ServiceContextTitle" v-if="isWidth800">
          <a-col :span="24" style="margin: 15px auto">
            <span class="ServiceContextLabelPhone">业务名称</span>
            <span>入户安检</span>
          </a-col>
          <a-col :span="24" style="margin: 15px auto">
            <span class="ServiceContextLabelPhone">办理时间</span>
            <span>2023-12-12</span>
          </a-col>
          <a-col :span="24" style="margin: 15px auto">
            <span class="ServiceContextLabelPhone ">办理人员</span>
            <span>某某某</span>
          </a-col>
        </a-row>
        <a-row id="Context">
          <span id="ContextTitle">服务评价内容</span>
        </a-row>
        <a-row class="Satisfaction">
          <a-col :span="isWidth800?7:6"><span>人员服务满意度</span></a-col>
          <a-col :span="isWidth800?17:18">
            <a-radio-group style="width:100%" v-model="model.personSatisfaction">
              <a-space style="display: flex;justify-content: space-between;">
                <a-radio value="满意">满意</a-radio>
                <a-radio value="一般">一般</a-radio>
                <a-radio value="不满意">不满意</a-radio>
              </a-space>
            </a-radio-group>
          </a-col>
        </a-row>
        <a-row class="Satisfaction">
          <a-col :span="isWidth800?7:6"><span>业务办理满意度</span></a-col>
          <a-col :span="isWidth800?17:18">
            <a-radio-group style="width:100%" v-model="model.personSatisfaction">
              <a-space style="display: flex;justify-content: space-between;">
                <a-radio value="满意">满意</a-radio>
                <a-radio value="一般">一般</a-radio>
                <a-radio value="不满意">不满意</a-radio>
              </a-space>
            </a-radio-group>
          </a-col>
        </a-row>
        <a-row class="Satisfaction">
          <a-col :span="isWidth800?7:6"><span>整体满意度</span></a-col>
          <a-col :span="isWidth800?17:18">
            <a-radio-group style="width:100%" v-model="model.personSatisfaction">
              <a-space style="display: flex;justify-content: space-between;">
                <a-radio value="满意">满意</a-radio>
                <a-radio value="一般">一般</a-radio>
                <a-radio value="不满意">不满意</a-radio>
              </a-space>
            </a-radio-group>
          </a-col>
        </a-row>
        <a-row class="Satisfaction">
          <a-textarea
            class="textarea"
            :showCount="true"
            v-model="model.content"
            placeholder="请填写对我们的建议..."
            :auto-size="{ minRows: 4, maxRows: 5 }"
          />
        </a-row>
        <a-row class="Satisfaction">
          <a-col :span="isWidth800?7:6"><span>是否匿名</span></a-col>
          <a-col :span="isWidth800?17:18">
            <a-radio-group style="width:100%" v-model="model.personSatisfaction">
              <a-space style="display: flex;justify-content: space-between;">
                <a-radio value="是">是&emsp;</a-radio>
                <a-radio value="否">否&emsp;</a-radio>
                <div>&emsp;&emsp;&emsp;&emsp;&emsp;</div>
              </a-space>
            </a-radio-group>
          </a-col>
        </a-row>
        <a-row class="Satisfaction_onsubmit">
          <a-button class="submit" @click="submit" type="primary" shape="round">
            提交
          </a-button>
        </a-row>
      </div>
      <div id="submitResult" v-if="submittedStatus">
        <a-row style="text-align: center;margin-top: 8%;margin-bottom:5%">
          <img src="../../../public/img/service/sendword.png" alt="" style="zoom:1.2">
        </a-row>
        <a-row style="text-align: center">
          <span style="width:100%;font-weight: 600" >提交成功！感谢您提出的宝贵建议我们会继续改进我们的服务. . .</span>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'ServiceReview',
  data () {
    return {
      model: {
        // 人员满意度
        personSatisfaction: '',
        // 业务办理满意度
        businessSatisfaction: '',
        // 整体满意度
        overallSatisfaction: '',
        // 评价内容
        content: '',
        // 是否匿名
        isAnonymous: false
      },
      plainOptions: [{ label: '满意', value: '满意' },
        { label: '一般', value: '一般' },
        { label: '不满意', value: '不满意' },],
      submittedStatus: false,
      windowWidth: window.innerWidth,
      isWidth800: false,
    }
  },
  created () {
    // TODO 接受 url 的参数并且查询 服务信息 然后给 model 赋值展示
  },
  mounted () {
    this.checkWidth()
    window.addEventListener('resize', this.checkWidth)
  },
  updated () {
    this.checkWidth()
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.checkWidth)
  },
  methods: {
    checkWidth () {
      this.windowWidth = window.innerWidth
      this.isWidth800 = this.windowWidth <= 800
    },
    submit () {
      // TODO 提交评价
      this.submittedStatus = true
    }
  }
}
</script>
<style lang="less" scoped>
.ServiceReviewPc {
  background-image: url('/public/img/login/background.webp');
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ServiceWarpPC {
  width: 70%;
  height: 80%;
}

#ServiceWarp {
  background-color: white;
  border-radius: 20px;
  overflow: hidden;

  #ServiceHeader {
    height: 18%;
    background-color: #ECF6FF;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #5290FF;
    font-size: 2rem;
    letter-spacing: 0.4em;
  }

  #submitResult {
  }

  .ServiceContext {
    padding: 10px 40px;
  }

  #ServiceContext {
    height: 82%;
    overflow: auto;

    #ServiceContextTitle {

      // 底部边框灰色虚线
      border-bottom: 1px dashed #eee;
      padding-bottom: 20px;

      .ServiceContextLabel {
        font-size: 1.1rem;
        font-weight: 500;
        color: #555;
        margin: 0 20px;
        white-space: nowrap;
      }

      .ServiceContextLabel + span {
        font-size: 1rem;
        font-weight: 400;
        color: #555;
        margin: 0 20px;
        white-space: nowrap;
      }
    }

    .ServiceContextLabelPhone {
      font-size: 1.1rem;
      font-weight: 500;
      color: #555;
      margin:   20px;
      white-space: nowrap;
    }

    .ServiceContextLabelPhone + span {
      font-size: 1rem;
      font-weight: 400;
      color: #555;
      margin: 0 20px;
      white-space: nowrap;
    }

    #Context {
      padding-top: 20px;
      padding-left: 20px;

      #ContextTitle {
        font-size: 1.1rem;
        font-weight: 600;
        color: #5290FF;
      }
    }

    .Satisfaction {
      padding-top: 20px;
      padding-left: 20px;

      textarea {
        resize: none;
        height: 30%;
        background-color: #F5F6F8;
        border: 0
      }
    }

    .Satisfaction_onsubmit{
      padding-top: 20px;
      padding-left: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      .submit {
        width : 40%;
        background: linear-gradient(90deg, #60B5EC 0%, #4F90EA 100%);
      }
    }
  }
}
</style>
