<template>
  <div class="addCollect">
    <div class="contanier">
      <div class="top">
        <span>添加收藏</span>
        <img :src="imgUrl" alt @click="$store.state.addCollectState=false" />
      </div>
      <div class="center">
        <input type="text" placeholder="请输入名称" v-model="nameCollect" />
      </div>
      <div class="bottom">
        <div @click="baoCun()">保存</div>
        <div @click="$store.state.addCollectState=false">取消</div>
      </div>
    </div>
  </div>
</template>
<script>
// 引入数据计算js用于机选渲染的数据
import ComputedData from '../../assets/js/computeddata'
export default {
  name: 'addCollect',
  data () {
    return {
      imgUrl: require('../../../static/nav/deleteImg.png'),
      nameCollect: ''
    }
  },
  watch: {
    nameCollect (val) {
      this.$store.state.nameCollect = val
    }
  },
  methods: {
    baoCun () {
      if (this.$store.state.nameCollect !== '') {
        let brt = new ComputedData()
        this.$axios({
          method: 'POST',
          url: 'member/index/add',
          data: {
            type: this.$route.query.type === 'area' ? 2 : 1,
            adv: this.$store.state.searchState,
            classify_id: this.$store.state.selectDataLeft.id,
            // 简单查询/高级查询
            data: this.$store.state.searchState === 1 ? [] : brt.insertCollectS(this.$store.state.tableData, this.$store.state.tableLine, this.$store.state.listInputVal, this.$store.state.lineInputVal),
            name: this.$store.state.nameCollect
          }
        }).then(res => {
          console.log(res, '高级查询数据展示')
          // 请求接口完成   请求成功
          if (res.data.code === 200) {
            this.$alert('添加成功', '温馨提示', {
              confirmButtonText: '确定'
            })
            // alert('添加成功')
            this.$store.state.addCollectState = false
          }
        }).catch((fail) => {
          console.log(fail)
        })
      } else {
        // alert('您添加的收藏名称不能为空！请重新填写！')
        this.$alert('您添加的收藏名称不能为空！请重新填写！', '温馨提示', {
          confirmButtonText: '确定'
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.addCollect {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  & > .contanier {
    width: 37.5rem;
    height: 24.6875rem;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    & > .top {
      margin-top: 1rem;
      width: 32.8125rem;
      height: 3.875rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: 0.125rem solid #bdbdbd;
      font-size: 1.375rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #333333;
      & > img {
        width: 1.3125rem;
        height: 1.3125rem;
      }
      & > img:hover {
        cursor: pointer;
      }
    }
    & > .center {
      width: 32.8125rem;
      & > input {
        width: 100%;
        height: 3.4375rem;
        border-radius: 0.3125rem;
      }
    }
    & > .bottom {
      width: 32.8125rem;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      & > div:nth-child(1) {
        width: 15.625rem;
        height: 3.1875rem;
        background-color: #52b6e3;
        border-radius: 0.3125rem;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #ffffff;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
      & > div:nth-child(2) {
        width: 15.625rem;
        height: 3.1875rem;
        border: solid 0.125rem #dbdbdb;
        border-radius: 0.3125rem;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #666666;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
      & > div {
        margin: 3rem 1.2rem;
      }
      & > div:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
