<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <CurdPanel full-height
             title-search-form="通知管理"
             title-data-table="通知列表"
             title-editor="通知管理"
             :editor-width="'600px'"
             :editor-validate="validate"
             :doQuery="NoticeApi.doQuery"
             :doGet="NoticeApi.doGet"
             :doSave="NoticeApi.doSave"
             :doDelete="NoticeApi.doDelete"
             close-on-save
             autoLoad>

    <!-- 查询条件区域 -->
    <template v-slot:search-form="{formData}">
      <el-form-item label="通知用户" prop="userName">
        <el-input v-model="formData.userName"></el-input>
      </el-form-item>
    </template>

    <!-- 表格列区域 -->
    <template slot="table-columns">
      <el-table-column prop="username" label="通知用户" show-overflow-tooltip/>
      <el-table-column prop="smsphone" label="短信号码" show-overflow-tooltip/>
      <el-table-column prop="cellphone" label="手机号码" show-overflow-tooltip/>
      <el-table-column prop="email" label="电子邮箱" show-overflow-tooltip/>
      <el-table-column prop="opensms" label="短信" width='60' show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <i v-if="scope.row.opensms==='1'" class="font-green-success el-icon-check" style="font-weight:bold"></i>
          <i v-if="scope.row.opensms==='0'" class="font-red el-icon-close" style="font-weight:bold"></i>
        </template>
      </el-table-column>
      <el-table-column prop="opencall" label="电话" width='60' show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <i v-if="scope.row.opencall==='1'" class="font-green-success el-icon-check" style="font-weight:bold"></i>
          <i v-if="scope.row.opencall==='0'" class="font-red el-icon-close" style="font-weight:bold"></i>
        </template>
      </el-table-column>
      <el-table-column prop="openemail" label="邮件" width='60' show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <i v-if="scope.row.openemail==='1'" class="font-green-success el-icon-check" style="font-weight:bold"></i>
          <i v-if="scope.row.openemail==='0'" class="font-red el-icon-close" style="font-weight:bold"></i>
        </template>
      </el-table-column>
    </template>

    <!-- 数据编辑区域 -->
    <template v-slot:editor="{data}">
      <el-form :model="data" ref="queryform" show-message label-position="top">
        <el-form-item class="flex-1" prop="usrmUserUuid" label="用户名" required>
          <!--<el-input v-model="data.userName"></el-input>-->
          <el-select v-model="data.usrmUserUuid" placeholder="请选择">
            <el-option v-for="item in users" :key="item.uuid" :label="item.username" :value="item.uuid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="flex-1" prop="smsPhone" label="短信号码">
          <el-input v-model="data.smsPhone"></el-input>
        </el-form-item>
        <el-form-item class="flex-1" prop="cellPhone" label="手机号码">
          <el-input v-model="data.cellPhone"></el-input>
        </el-form-item>
        <el-form-item class="flex-1" prop="email" label="电子邮箱">
          <el-input v-model="data.email"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item class="flex-1" prop="openSms" label="短信通知">
              <div class="el-input__box">
                <el-switch v-model="data.openSms" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0" :disabled="!/^\d{11}$/.test(data.smsPhone)"/>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="flex-1" prop="openCall" label="电话通知">
              <div class="el-input__box">
                <el-switch v-model="data.openCall" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0" :disabled="!/^\d{11}$/.test(data.cellPhone)"/>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="flex-1" prop="openEmail" label="邮件通知">
              <div class="el-input__box">
                <el-switch v-model="data.openEmail" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0"
                           :disabled="!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(data.email)"/>
              </div>

            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>

  </CurdPanel>

</template>

<script>
  import NoticeApi from "@/api/base/sysm/NoticeApi";

  export default {
    name: "SampleCurd",
    data() {
      return {
        NoticeApi,
        users: []
      };
    },
    async mounted() {
      let resp = await NoticeApi.getUserList();
      this.users = resp.datarows;
    },
    methods: {
      validate() {
        return this.$refs["queryform"].validate();
      }
    }
  };
</script>

<style scoped>
</style>