<template>
  <div>
    <el-button icon="el-icon-edit" size="small" @click="onShow">编 辑</el-button>
    <el-dialog title="编辑" top="30px" :visible.sync="dialogEditVisible">
      <el-row :gutter="16">
        <el-form  :model="form" :rules="rules" ref="form" size="small" inline class="demo-ruleForm">
          <el-col :span="12">
            <el-form-item label="企业名称" prop="enterprisename">
              <el-input class="normal_input-width" v-model="form.enterprisename" placeholder="请输入企业名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业简称" prop="sitename">
              <el-input class="normal_input-width" v-model="form.sitename" placeholder="请输入企业简称"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row style="margin:32px 0 0 0" :gutter="16">
        <el-col :span="12">
          <p>企业操作页LOGO：</p>
          <uploadFile v-if="show" style="margin-top:10px" :folderid="folderid" accept=".JPG,.PNG,.jpg,.png" btntype="image" :bindData="{ownertable:'sys_site',ownerid:siteinfo.siteuid,usetype:'actionlogo'}" @onSuccess="uploadSuccess"></uploadFile>
          <div v-else class="image-panel">
            <i class="el-icon-error close-btn" @click="deleteFileLink"></i>
            <img v-show="img.usetype === 'actionlogo'" v-for="img in siteinfo.attinfos" :key="img.index" style="width:100%" :src="img.url" alt="">
          </div>
          <small style="display:block;margin-top:20px" class="info">注：建议上传图片大小1024x1024，大小不超过2M，格式为JPG/PNG</small>
        </el-col>
      </el-row>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogEditVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" @click="submit" class="normal-btn-width btn-warning">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'

import uploadFile from '../../../../components/upload/hw_obs_upload.vue'
export default {
  props:['basicInfo'],
  components:{
    uploadFile
  },
  computed:{
    ...mapGetters({
      siteinfo:'siteinfo'
    }),
    show () {
      if (this.siteinfo.attinfos.some(item=>item.usetype === 'actionlogo')) {
        return false
      } else {
        return true
      }
    }
  },
  data () {
    return {
      dialogEditVisible:false,
      form:{},
      rules:{
        enterprisename:[
          { required: true, message: '请输入企业名称', trigger: 'blur' },
        ],
        sitename:[
          { required: true, message: '请输入企业简称', trigger: 'blur' }
        ]
      },
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid
    }
  },
  methods:{
    onShow () {
      this.dialogEditVisible = true
      this.form = Object.assign({},this.form,this.siteinfo)
    },
    submit () {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false;
        const res = await this.$api.requested({
          "classname": "webmanage.site.site",
          "method": "updateSite",
          "content": this.form
        })
        this.tool.showMessage(res,()=>{
          this.dialogEditVisible = false
          this.$emit('onSuccess')
        })
      });
    },
    async deleteFileLink (item) {
      const res = await this.$api.requested({
        "classname": "system.attachment.Attachment",
        "method": "deleteFileLink",
        "content": {
          "linksids":[this.form.attinfos[0].linksid]
        }
      })
      res.code === 1?this.$emit('onSuccess'):''
    },
    uploadSuccess () {
      this.$emit('onSuccess')
      setTimeout(() => {
        this.form = Object.assign({},this.form,this.siteinfo)
      }, 100);
    }
  }
}

</script>
<style scoped>
.dialog-footer{
  margin-top: 50px;
  text-align: center;
}

</style>