<template>
  <el-tabs v-model="curTab">
    <el-tab-pane label="演示效果" name="demo">
      <pre>{{ permission }}</pre>
      <form v-form>
        <table class="form-table" cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr
              v-permit="4"
              v-for="(data, $index) in list"
              :key="$index"
              data-subname="data.test"
              :data-index="$index"
            >
              <td>
                <ht-select
                  v-model="data.ah"
                  class="m-r"
                  :options="[
                    { key: '1', value: '爬山' },
                    { key: '2', value: '游泳' },
                    { key: '3', value: '下棋' },
                  ]"
                  :linkage="[
                    {
                      value: '1',
                      effect: [
                        { target: 'permission.shan', type: '=', value: 'b' },
                        {
                          target: 'permission.table.yzzby.hidden',
                          type: '=',
                          value: false,
                        },
                      ],
                    },
                    {
                      value: '2',
                      effect: [
                        { target: 'permission.yong', type: '=', value: 'w' },
                        {
                          target: '',
                          ref: 'data.shan',
                          type: '+',
                          value: 'email',
                        },
                      ],
                    },
                    {
                      value: '3',
                      effect: [
                        { target: 'permission.qi', type: '=', value: 'n' },
                      ],
                    },
                  ]"
                />
                <ht-input
                  :permission="permission.shan"
                  v-model="data.shan"
                  :ref="'data.shan' + $index"
                  :validate="'required'"
                  placeholder="喜欢爬哪座山"
                />
                <ht-input
                  :permission="permission.yong"
                  v-model="data.yong"
                  :ref="'data.yong' + $index"
                  :validate="'required'"
                  placeholder="喜欢哪种泳姿"
                />
                <ht-input
                  :permission="permission.qi"
                  v-model="data.qi"
                  model-expression="data.qi"
                  :ref="'data.qi' + $index"
                  :validate="'required'"
                  placeholder="喜欢哪种棋"
                />
              </td>
            </tr>
            <tr v-permit="4">
              <td>
                <el-container v-if="!permission.table.yzzby.hidden">
                  <el-header
                    sunBos=""
                    style="height:30px;line-height:30px;background: #fafafa; font-weight: bold;font-size: 14px;"
                  >
                    <div class="flex" style="justify-content: space-between;">
                      隐藏子表一
                    </div>
                  </el-header>
                  <el-main></el-main>
                </el-container>
              </td>
            </tr>
            <tr v-permit="4">
              <td width="200px">报销领款方式：</td>
              <td>
                <ht-checkbox
                  v-model="data.type"
                  class="m-r"
                  permission="w"
                  :options="[
                    { key: '1', value: '银行卡' },
                    { key: '2', value: '现金' },
                  ]"
                  :linkage="linkage"
                />
              </td>
            </tr>
            <tr v-permit="4">
              <td>银行账号：</td>
              <td>
                <ht-input v-model="data.num" :permission="permission.num" />
              </td>
            </tr>
          </tbody>
        </table>
      </form>
    </el-tab-pane>
    <el-tab-pane label="api文档" name="api">
      <MdView url="md/linkage.md" />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import MdView from "@/views/MdView.vue";

export default {
  components: { MdView },
  data() {
    return {
      curTab: "demo",
      data: {
        ah: "",
        shan: "",
        yong: "w",
        qi: "w",
        eee: "",
        type: "2",
        num: "",
      },
      list: [{}],
      linkage: [
        {
          value: "1",
          effect: [
            { target: "permission.num", type: "=", value: "n" },
            {
              target: "permission.table.yzzby1.hidden",
              type: "=",
              value: false,
            },
          ],
        },
        {
          value: "2",
          effect: [
            {
              target: "permission.table.yzzby2.hidden",
              type: "=",
              value: false,
            },
          ],
        },
      ],
      permission: {
        shan: "w",
        yong: "w",
        qi: "w",
        num: "b",
        table: {
          yzzby: {
            hidden: true,
          },
          yzzby1: {
            hidden: true,
          },
          yzzby2: {
            hidden: true,
          },
        },
      },
    };
  },
};
</script>
