<template>
  <div id="distribute">
    <admin-frame @search="search" :limit="limit" :total="total" topType="2" @back="back" :rightArrow="false" :useNav="false">
      <template v-slot:info>
        <van-col span="24" class="one">
          <van-button type="info" size="small" @click="toSearch()">查询条件</van-button>
          <van-button type="danger" size="small" @click="selectDel()">批量删除</van-button>
          <van-button type="danger" size="small" @click="onekeyDel()">一键删除</van-button>
          <van-button type="info" size="small" @click="selectUser()">选择用户</van-button>
          <van-button type="info" size="small" @click="selectSubmit()">确认批量分配</van-button>
          <p>
            专利总数：<span class="total">({{ total }})</span>
          </p>
        </van-col>
        <van-col span="24" class="two">
          <van-form>
            <van-field v-model="form.user_id" name="user_id" label="用户id" style="display: none" />
            <van-field v-model="form.name" name="name" label="用户姓名" readonly />
            <van-field name="patentData">
              <template #input>
                <van-checkbox-group v-model="form.patentData" direction="vertical">
                  <van-checkbox shape="square" :name="item.id" v-for="(item, index) in list" :key="index">
                    <van-col span="24" class="list">
                      <van-col span="24" class="title">
                        {{ item.name }}
                      </van-col>
                      <van-col span="24" class="other">
                        <van-col span="24" class="otherInfo">
                          专利有效性：<span>{{ item.term || '暂无' }}</span>
                        </van-col>
                        <van-col span="24" class="otherInfo">
                          申请时间：<span>{{ item.create_date || '暂无' }}</span>
                        </van-col>
                      </van-col>
                    </van-col>
                  </van-checkbox>
                </van-checkbox-group>
              </template>
            </van-field>
          </van-form>
        </van-col>
      </template>
    </admin-frame>
    <van-dialog class="dialog" v-model="dialog.show" :title="dialog.title" :show-confirm-button="false" show-cancel-button cancel-button-text="返回">
      <search-1 v-if="dialog.type == '1'" :searchForm="searchForm" @reseat="reseat" @onSubmit="onSubmit"></search-1>
      <searchuser-1 v-if="dialog.type == '2'" @userSubmit="userSubmit"></searchuser-1>
    </van-dialog>
  </div>
</template>

<script>
import search1 from '@/layout/patentInfo/search-1.vue';
import searchuser1 from '@/layout/patentInfo/searchuser-1.vue';
import adminFrame from '@frame/src/components/mobile-frame/mobile-main.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: patentinfo } = createNamespacedHelpers('patentinfo');
import { Dialog } from 'vant';
export default {
  name: 'distribute',
  props: {},
  components: { adminFrame, search1, searchuser1 },
  data: function () {
    return {
      list: [],
      limit: 4,
      total: 0,
      // 弹框
      dialog: { show: false, title: '查询条件', type: '1' },
      // 查询条件
      searchForm: {},
      // 批量处理表单
      form: {},
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...patentinfo(['query', 'updateUser', 'delete', 'delMany']),
    async search({ skip = 0, limit = this.limit, ...info } = {}) {
      let res = await this.query({ skip, limit, ...this.searchForm, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    // 查询专利
    toSearch() {
      this.dialog = { show: true, title: '查询条件', type: '1' };
    },
    // 重置条件
    reseat() {
      this.searchForm = {};
      this.search();
    },
    // 提交查询
    onSubmit({ data }) {
      this.search(data);
      this.dialog = { show: false, title: '查询条件', type: '1' };
    },
    // 批量删除
    async selectDel() {
      let data = this.form.patentData;
      if (data && data.length > 0) {
        Dialog.confirm({ title: '信息提示', message: '删除操作不可恢复，您确定要继续么？' })
          .then(async () => {
            for (const val of data) {
              let res = await this.delete(val);
              if (this.$checkRes(res)) {
                this.$toast({ type: `success`, message: `删除成功` });
                this.search();
              }
            }
          })
          .catch(() => {});
      } else {
        this.$toast({ type: `error`, message: `缺少必要信息` });
      }
    },
    // 一键删除
    async onekeyDel() {
      Dialog.confirm({ title: '信息提示', message: '删除操作不可恢复，如无查询条件，删除自动认定为全部信息，您确认要继续么？' })
        .then(async () => {
          let res = await this.delMany({ ...this.searchForm });
          if (this.$checkRes(res)) {
            this.$toast({ type: `success`, message: `删除成功` });
            this.search();
          }
        })
        .catch(() => {});
    },
    // 选择用户
    selectUser() {
      this.dialog = { show: true, title: '选择用户', type: '2' };
    },
    // 确认选择用户
    userSubmit(data) {
      this.$set(this.form, `user_id`, data.id);
      this.$set(this.form, `name`, data.name);
      this.dialog = { show: false, title: '选择用户', type: '2' };
    },
    // 提交
    async selectSubmit() {
      let data = { patentData: this.form.patentData, user_id: this.form.user_id ? [{ user_id: this.form.user_id, name: this.form.name }] : '' };
      if (data.patentData && data.user_id) {
        let res = await this.updateUser(data);
        if (this.$checkRes(res)) {
          this.$toast({ type: `success`, message: `操作完成` });
          this.search();
        }
      } else {
        this.$toast({ type: `error`, message: `缺少必要信息` });
      }
    },
    // 返回
    back() {
      this.$router.push({ path: '/patent/index' });
    },
  },

  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.one {
  text-align: center;
  margin: 8px 0;
  .van-button {
    margin: 0 5px 5px 0;
  }
  p {
    font-size: 16px;
    margin: 5px 0 0 0;
    span {
      color: #000;
      font-weight: bold;
    }
  }
}
.two {
  /deep/.van-field__value {
    width: 100%;
  }
  .list {
    border: 1px dashed #ccc;
    margin: 0 0 10px 0;
    padding: 5px 10px;
  }
}
.dialog {
  /deep/.van-dialog__content {
    max-height: 350px;
    overflow-y: auto;
  }
}
</style>
