/****************************************************************************
所属系统: 组件库 所属模块: 操场—分页组件 创建时间: 2019年11月4日 08:50 维护人:
徐勇 *┌────────────────────────────────────────────────────────────┐
*│　此技术信息为本公司机密信息，未经本公司书面同意禁止向第三方披露．│
*│　版权所有：杰人软件(深圳)有限公司　　　　　　　　　　　 │
*└────────────────────────────────────────────────────────────┘
***************************************************************************/
<template>
  <div class="content">
    <h2 class="j-mb-20">panel组件</h2>

    <JrPanel title="标题" desc="描述">
      <template #content>
        内容插槽
      </template>
    </JrPanel>

    <JrPanelChoose
      title="1. 校区跟单岗位（课程顾问）"
      :list="[]"
      :addressBookAttrs="addressBookAttrs"
      @save="saveChoose"
    />

    <JrPanelForm
      title="4. 城市公海资源设置"
      :data="{
        noFollowRecycleDay: 1,
        noFollowAlarmDay: 2,
        limitReviceNum: 3,
        receiveNoFollowRecycleDay: 4,
        reReleaseReceiveLimitDay: 5,
        price: '2.0',
        day: 10,
        time: '',
        user: ''
      }"
      :rows="[
        '当资源分配给课程顾问[noFollowRecycleDay]天后未跟进时，系统回收至城市公海，距离回收日期[noFollowAlarmDay]天时，显示到公海预警中。',
        '每个城市公海每天限制每人领取资源数量为[limitReviceNum]人，达到该数量后当天将不能再次领取。',
        '城市公海领取的资源超过[receiveNoFollowRecycleDay]天未跟进，将重新回到城市公海。',
        '有领取回来后重新释放至公海的资源时[reReleaseReceiveLimitDay]天内不能再次领取。',
        '一条资源单价为[price]元。',
        '系统将于每月[day]日[time]点自动将需要上传考评参考文件的岗位人员数据同步到上传页面，并发送通知给到[user]，提醒他及时上传。'
      ]"
      :attrsConfig="{
        noFollowRecycleDay: {
          maxlength: 3
        },
        time: {
          isHH_mm: true,
          type: 'time'
        }
      }"
      :eventsConfig="{
        noFollowRecycleDay: {
          input: (formData, val) => {
            if (val > 28) {
              formData.noFollowRecycleDay = 28;
            }
          }
        }
      }"
      :fieldTypes="{
        price: 'string'
      }"
      :fieldComponent="{
        time: 'datePicker',
        user: 'slot'
      }"
      @save="saveForm"
    >
      <template #user="{form}">
        <jr-input
          v-model="form.user"
          readonly
          underline
          placeholder="请选择"
          suffixIcon="icon-choose"
          :height="18"
          @focus="handleFocus(form)"
        ></jr-input>
      </template>
      <!-- 底部插槽 -->
      <template #bottom>
        底部插槽：
      </template>
    </JrPanelForm>
  </div>
</template>

<script>
import listData from "../addressBook/addressBook.json";
export default {
  name: "panelView",
  label: "面板操场",
  data() {
    return {
      addressBookAttrs: {
        list: Object.freeze(listData),
        multiple: true
      }
    };
  },
  methods: {
    async handleFocus(form) {
      const { data } = await this.$addressBook({
        list: Object.freeze(listData)
      });

      form.user = data.name;
    },
    saveChoose(data) {
      console.log(data);
    },
    saveForm(data) {
      console.log(data);
    }
  }
};
</script>

<style lang="scss" scoped></style>