<script>
import { area } from '@/api/area'

export default {
  name: 'MessageTipModalContent',
  props: {
    qy: String,
    content: {
      type: String,
      default: ""
    },
    showOptions: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      areaData: [],
      areaValue: "",
      content_: `xx 区/县，近一年共发生高层建筑火灾 XX 起，造成 XX 人死亡、XX 万元直接财产损失，辖区内高层建筑中有 XX 栋属于重大风险，XX 栋属于较大风险，XX 栋属于一般风险，XX 栋属于低风险。市高层建筑消防安全“除险清患”专项行动领导小组办公室，将你区/县纳入重点督导库，请认真研判本辖区高层建筑火灾风险形势，采取针对性措施，切实消除隐患，遏制高层建筑火灾发生。`
    }
  },
  watch: {
    qy: {
      handler(val) {
        this.areaValue = (val === '重庆市') ? null : val
      },
      immediate: true
    },
    content: {
      handler(val) {
        if (val !== '') {
          this.content_ = val
        }
      },
      immediate: true
    }
  },
  created() {
    area({
      pageNum: 1,
      pageSize: 100
    }).then(res => {
      this.areaData = res.data.rows
    })
  },
  methods: {
    sendSms() {
      this.$alert('信息已发送', '信息提示', {
        confirmButtonText: '确定',
        distinguishCancelAndClose: true,
        type: "success",
        modal: false,
        callback: action => {
          this.$emit("close" )
        }
      });
    }
  }
}
</script>

<template >
  <div>
    <div v-if="showOptions" class="message-tip-toolbar">
      <el-select style="width: 150px;" size="small" placeholder="区域" v-model="areaValue">
        <el-option  :value="item.areaTitle" :label="item.areaTitle" v-for="(item,index) in areaData" :key="index" ></el-option>
      </el-select>
    </div>
    <div class="message-tip-content">
      <el-input  type="textarea" v-model="content_" :rows="10" show-word-limit resize="none"></el-input>
    </div>
    <div class="message-tip-bottom" name="信息提醒">
      <el-button size="small" @click="sendSms">发送</el-button>
    </div>
  </div>
</template>

<style scoped lang='less'>
.message-tip-toolbar {
  display: flex;
  padding-bottom: 10px;
  justify-content: start;
    // padding: 10px 10px 0px 20px;
    ::v-deep(.el-input__inner) {
    border: none;
    background: linear-gradient(
      360deg,
      rgba(0, 148, 255, 0.5) 0%,
      rgba(0, 148, 255, 0.31) 100%
    );
    color: #fff;
  }
}
.message-tip-bottom {
  display: flex;
  padding: 10px 0px;
  justify-content: end;


  ::v-deep(.el-button) {
    background: linear-gradient(180deg, rgba(68, 241, 255, 1) 0%, rgba(68, 241, 255, .69) 100%);
    color: #fff;
    border: none;
  }
}
</style>
