
<template>
  <div>
    <basicLayout 
      ref="list" 
      formPath="contractModel"
      tableName="contractModelTable" 
      idName="sa_contract_template_clauseids" 
      :apiId="{query:20221128164602,del:20221125195702}"
      :options="options"
      @listData="listdata"
      :hideSearch="true">
      <div slot="custom" style="display:flex">
        <!-- <div class="label_center">
          <p class="search__label">范围:</p>
          <el-select
            class="inline-16"
            size="small"
            v-model="area"
            placeholder="请选择范围"
            clearable
            @change="$refs.list.param.content.type=area;$refs.list.listData()"
          >
            <el-option
              v-for="item in areaList"
              :key="item.remarks"
              :label="item.value"
              :value="item.remarks"
            ></el-option>
          </el-select>
        </div> -->
      </div>

      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.data[[scope.data.column.columnname]] == '项目'">
          <span v-if="scope.data.column.data.typemx == '直销'">直销项目协议</span>
          <span v-else-if="scope.data.column.data.typemx == '经销'">经销项目协议</span>
        </div>
        <div v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '框架'">
          经销商合作协议
        </div>
        <div v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '工具借用'">
          工具借用协议
        </div>
        <div v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '居间'">
          居间协议
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]}}
        </div>
        <div v-if="!scope.data.column.data[[scope.data.column.columnname]] && scope.data.column.columnname != 'count'">--</div>
      </template>
      <template v-slot:tbOpreation="scope">
        <el-button type="text" size="mini" @click="detailBtn(scope.data.data)">详 情</el-button>
      </template>
    </basicLayout>

    <!--抽屉面板-->
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      direction="rtl"
      size="80%"
      append-to-body
      @close="closeDrawer">
      <div class="detail__panel">
        <router-view/>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  data () {
    return {
      options:[],
      drawer:false
    }
  },
  created () {

  },
  watch: {
    $route (val) {
      if (val.path == '/contract_model') {
        this.$refs.list.listData()
      }
    },
    DrawerShow (val) {
      val ? this.drawer = true : this.drawer = false
    }
  },
  computed: {
    ...mapGetters({
      DrawerShow:'DrawerShow'
    })
  },
  methods:{
    closeDrawer () {
      this.$router.push('/contract_model')
      this.$store.dispatch('DrawerShowChange',false)
    },
    listdata(data) {
      console.log(data,'eeee');
    },
    detailBtn (data) {
      this.$store.dispatch('DrawerShowChange',true)
      this.$router.push({
        path:'/contractModelDetail',
        query:{
          type:data.type=='项目' 
            ? data.typemx=='直销' 
              ? '1' : '2' 
          : data.type == '框架' 
            ? '3' : data.type == '居间' ? '4' : '5',
        }
      })
    }
  }
}

</script>
<style scoped>
</style>