<template>
    <div
      v-loading="loading"
      element-loading-text="服务器处理数据中，请稍候......."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
    <p style="margin-top: 10px;margin-bottom: 30px">
        请选择你需要打印的门诊收费模板
    </p>
    <el-row :gutter="20" type="flex" justify="center">
        <el-col :span="6" style="text-align: center">
        <div
            @click="imgClick('https://images.shengws.com/2020/12/3/admin_avatar_1606985484284.png')"
        >
            <el-tooltip
            class="item"
            effect="dark"
            :hide-after="2000"
            content="点击查看大图"
            placement="top-start"
            >
          

            <el-image
                style="width: 200px; height: 200px"
                :src="require('@/assets/home/100.png')"
            ></el-image>

            </el-tooltip>
        </div>
        <el-radio v-model="radio" label="1" @change="change"
            >模版一</el-radio
        >
        </el-col>  
    </el-row>
 


      <el-image-viewer
        v-if="showViewer"
        :on-close="closeViewer"
        :url-list="imgs"
      ></el-image-viewer>

    </div>
  </div>
</template>

<script>
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
// import { getPrintTemplate, postPrintTemplate } from "@/api/data";
import { postChargePrintTemplate,getChargePrintTemplate } from "@/api/project/project"
import store from "@/store";

export default {
  name: "printTemplate",
  components: { ElImageViewer, BreadCrumb },
  data() {
    return {
      showViewer:false,
      crumbs: [
        { path: false, name: "管理中心" },
        { path: "data/print", name: "打印模版" }
      ],
      imgUrl_One: require("@/assets/home/1.jpg"),
      imgUrl_Two: require("@/assets/home/2.jpg"),
      imgUrl_Five: require("@/assets/home/5.jpg"),

      imgs:[],

      imgs_one: [
        // 'https://images.shengws.com/template_one.jpg'
        "https://images.shengws.com/fangji.jpg"
      ],
      imgs_two: ["https://images.shengws.com/template_two.jpg"],
      imgs_five: ["https://images.shengws.com/template_five.jpg"],
      imgs_seven: ["https://images.shengws.com/serven.png"],
      imgs_six: ["https://images.shengws.com/eight.png"],
      imgs_eight: ["https://images.shengws.com/template_six.png"],
      imgs_ten: ["https://kuyi.shengws.com/template_ten.jpg"],

      delay: 500,
      radio: 0,
      tempRadio: 0,
      loading: false
    };
  },
  methods: {
    imgClick(val){
      this.imgs = []
      this.imgs.push(val)
      this.showViewer = true

    },
    closeViewer() {
      this.showViewer = false
    },
    change: function(val) {
      console.log("val是什么", val);
      this.$confirm(
        "切换模版后，透析记录的字段会根据打印单来显示与隐藏，是否确定切换模版",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info"
        }
      )
        .then(() => {
          var params = {
            template_id:val
          }
          this.loading = true;
          postChargePrintTemplate(params).then(response => {
            if (response.data.state == 1) {
              var template_id = response.data.data.template_id;
              this.radio = template_id.toString();
              this.tempRadio = template_id.toString();
           
              this.loading = false;
             
              this.$message({
                type: "success",
                message: "切换成功"
              });
            }
          });
        })
        .catch(() => {
          this.radio = this.tempRadio;
        });
    },

    getlist(){  
      getChargePrintTemplate().then(response=>{
         if(response.data.state == 1){
           var template = response.data.data.template;
           this.radio = template.template_id.toString();
           this.tempRadio = template.template_id.toString();
         }
        
      })
    }
  },
  created() {

    this.getlist()
  
  }
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;

  & :last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
</style>
<style lang="scss">
.app-print {
  .el-radio__label {
    padding-left: 10px;
  }
}
</style>
