<template>
  <div>
    <van-popup v-model="postShow" class="more-search bg-gray" position="right" get-container="body">
      <div class="title-layout">锁定状态</div>
<!--      <van-search placeholder="请输入编码或者名称" show-action>-->
<!--        <i slot="left-icon" class="fa fa-search"></i>-->
<!--        <div slot="action" class="font14">搜索</div>-->
<!--      </van-search>-->
<!--      <search-result :result-num="'3'"></search-result>-->
      <div class="w100 listHeight" ref="scrollRef">
        <van-radio-group v-model="checked">
          <van-cell-group>
            <van-cell title="加锁" clickable @click="itemClick('LOCK')">
              <template #right-icon>
                <van-radio name="LOCK"/>
              </template>
            </van-cell>
            <van-cell title="解锁" clickable @click="itemClick('UNLOCK')">
              <template #right-icon>
                <van-radio name="UNLOCK"/>
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div class="action-bottom">
        <van-button type="default" @click="onCancelClick">取消</van-button>
        <van-button type="info" class="submit" @click="onConfirmClick">确定</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import SearchResult from './SearchResult'

export default {
  name: 'CgSearchLockType',
  components: { SearchResult },
  data() {
    return {
      postShow: false,
      checked: ''
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value(val) {
      this.postShow = val
    },
    postShow (val) {
      if (!val) {
        this.$refs.scrollRef.scrollTop = 0
      }
      this.$emit('input', val)
    }
  },
  methods: {
    onCancelClick() {
      this.checked = ''
      this.postShow = false
      this.$emit('cancleclick')
    },
    onConfirmClick() {
      if (!this.checked) {
        this.$dialog.alert({
          title: '温馨提示',
          message: '请选择锁定状态！'
        }).then(() => {})
        return
      }
      this.postShow = false
      this.$emit('confirmclick', {
        page: 'lockType',
        value: this.checked
      })
    },
    itemClick(data) {
      this.checked = data
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #f5f5f5;
}
.more-search {
  width: 75%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.title-layout {
  height: 45px;
  line-height: 45px;
  text-align: center;
  background: white;
  font-size: 16px;
  font-weight: bold;
  color: #23262a;
}

.listHeight {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
}

.num-tip {
  padding: 10px;
}

.item-layout {
  height: 40px;
  line-height: 40px;
  background: white;
  border-bottom: #dedede 1px solid;
  padding-left: 10px;
}

.action-bottom {
  width: 100%;
  display: flex;
  button {
    flex: 1;
  }
}

.red-tips {
  color: #fb1c1c;
  font-weight: bold;
}
</style>
